Lib Version for native html

[pnegahdar]

This editor is so cool, kudos!

I'm not too familiar with svelte, but how hard would it be to compile this into JS and have a pure JS api to bind it to an element.

carta = new Cart()
render(carta, document.getElementById("editor")) 

That way it can be used in a react or vanilla project as well?

[BearToCode]

Hi @pnegahdar!
It would be really cool to be able to use the editor with other frameworks such as React and Vue. Honestly, I don't have experience with compiling Svelte and using in other frameworks, but quickly looking online seems tricky but possible. For example, I saw that bytemd, another popular markdown editor, already does so.

I currently do not have time to dedicate to this, but I'll leave the issue open: I may come back to this in the future, or maybe you or some other developer may help 😄

[mithi]

Hi @BearToCode ,

I know that currently you don't have time to dedicate to this,

I was just wondering if it is possible to sponsor you financially or for you to take a commission (Not soon maybe 1 to 2 months from now when Svelte 5 is stable?) to do the following:

1. to create a new version that ports this to Svelte 5 (including plugins, use Runes and remove deprecated features that will be removed in Svelte 6)

2. to do some research and write from guiding instructions on how to theoretically use the Carta object and build our the vanilla js components for the following:

• MarkdownEditor
• Markdown
• Toolbar
• Input
• Renderer

I can imagine this library being used in a lot of projects, and frameworks, and I'm willing to put work to port this to vanilla JS (and possibly Vue and React as well)... But I need some guidance (I haven't used Svelte 4 before... and regarding the internals of the carta library itself... I'm quite confused about the architecture system design decisions and responsibilities of the components because of my unfamiliarity of svelte 4 😢 ... ),

I'm imagining it will be something like quill mention or Niivue

Where we can create our own components like (Just throwing initial ideas around)

const carta = new Carta({ extensions: [hashtag()] });

const markdownEditor = new MarkdownEditor(
  { carta,
    debounce: 500,
    onDebouncedChange: (insertedTextSinceLastCalled: string, currentPosition: number) => {
      // maybe get the AST here
      console.log(carta.currentASTRepresentation);
      console.log(carta.currentStringRepresentation);
      console.log(insertedTextSinceLastCalled, currentPosition)
      // so we can save it on our server
      // or plug it in on our own previewer 
    },
    onDispatchEvent: (eventType, payload) => {
      // maybe do something given eventType and payload
      console.log(eventType === "carta-render", payload) // onKeyUp, onKeyDown, onBlur
      console.log(eventType === "onClick", payload.cursorPosition) 
    }
  }).

 markdownEditor.attachToId("carta-markdown-editor-container")

<div id="carta-markdown-editor-container" />

I know these tasks are quite involved, but I think you have done incredible work..

• striking a good balance between simplicity, and extensibility (I feel like milkdown is quite bloated with builtin prose mirror)...
• I love that you have build awesome plugins as well... (which can serve
  as as a good starting point to build our own plugins)...
• awesome documentation on how to create advance extensions...
• I can go on and on on how amazing this project is. 🤩 ❤️

I'm willing to put my money where my mouth by personally sponsoring you for the two tasks if I can afford it...

Again.. amazing project. Hopefully you can give me a number (in USD, we can talk about this privately through email), and I'll save up 🙂.

Looking forward to hear back from you 😀

[BearToCode]

Hi @mithi,

I appreciate very much your comment 😄 . I don't think I'll be able to work on this for at least a couple of months, due to my enrollment in university, but I should be able to do something then.

I think you asked for two very different modifications in your comment in terms of work required: migrating to Svelte 5 and creating a vanilla JS version of the library.

For the first one, even thought Svelte 5 is not yet definitive and I've not worked directly with it, I'm quite confident not too much work will be needed. This project does not make extensive use of Svelte components, so migrating shoud be straightforward. I'd still wait for a stable release before doing so(as you said).

Providing a vanilla version of the library is a lot more tricky and requires planning. There are several points that need to be adressed to make it viable, as Svelte(Kit) does not provide a simple universal way to do so:

• Should we provide web components (<markdown-editor>) or a class-component to be mounted (new MarkdownEditor)? I've personally compiled another project of mine to web components and it was no easy task. I'd prefer to use a vanilla class, but I'll have to check out how to do that...
• How are embedded Svelte styles handled?
• Will custom elements provided by plugins, which are embedded in the editor (e.g. the search features of the Slash and Emoji plugins) still work? Probably all options that offer SvelteComponents won't be available.
• Make sure all the plugins will still work.
• Will SSR work?
• Hope that everything will work fine with Svelte 5 🤞

There are probably other things that I forgot/will discover during developing.

Regarding the commission: I've created this project because I needed an editor myself, and I decided to share it. I don't see developing OSS as a job. For this reason, I don't quite like the idea of a commision.
Still, if you find this project valuable and plan to make a donation, based on how much value it has provided you, I'll highly appreciate it ❤️ .
If you need the previously mentioned support to be able to use the editor, maybe wait until it has been implemented. I might look into setting up a GitHub sponsor page.

If in the meantime I hopefully get time to dedicate to this, you'd like to start working on it yourself, start making some other changes or have any question regarding the project, feel free to ask.

[mithi]

Hi @BearToCode

I really appreciate your detailed response to my query.

I'm sorry I think I did not word the second request properly, I didn't mean to ask you do create a vanilla JS version of the library, that would be too much work for you!

It's more like I noticed that the Carta class is purely written in Typescript and I think that it would be possible for for me
to use that Carta instance and build my own Markdown editor on top of it instead (can be in Svelte 5 or VueJS or React).

I was just hoping I could request to you to write more detailed documentation on how the svelte 4 component MarkdownEditor (and other surrounding components like Input) uses the Carta instance under the hood...

I believe that a documentation will help provide some direction and guidance so I can write my own MarkdownEditor in other frameworks - a MarkdownEditor Component (in React and/or Vue) that uses the Carta instance you have written.

As you've mentioned that this library does not make extensive use of Svelte components, so I was thinking that maybe I can actually migrate it myself, if you don't have time to do so. Svelte 5 is now on Release Candidate phase (https://svelte.dev/blog/svelte-5-release-candidate)

I quote from there blog post:

It doesn't mean that it's ready for production, or that nothing will change between now and 5.0. But if you've held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out...

I understand that you don't quite like the idea of commission, I'd gladly make a donation (Maybe through PayPal or Buy me a Coffee (Like https://ko-fi.com/minimithi) as an appreciation of your time and effort into writing this.

I tried to read your MarkdownEditor component (and the other components surrounding it like the Input and Renderer) but it's quite difficult for me to grasp (partially because I haven't played around with Svelte 4 as much as I should), and also unfortunately I'm also a bit overwhelmed since I have very little understanding on the system design of this library, and the reasonings behind design decisions.

I can try to spend a bit more time to try to explore and play around but then I thought maybe it's more efficient to just ask you directly for help since you know this library inside out (naturally because you wrote it!)

TLDR

I was wondering if you can I can ask you to write more detailed documentation on how the Svelte 4 components you wrote utilizes the Carta object under the hood so I can build my custom markdown editor
in other frameworks (and in Svelte 5) to use the Carta object. The documentation would also help me migrate your existing components (including some of your plugins like the Slash one), from Svelte 4 to Svelte 5, if you don't have time to do so. I understand that you don't quite like the idea of commission, I'd gladly make a donation as an appreciation of your time and effort into writing this.

Again, thank you so much for creating this library and making it open source... It's the most awesome extendable markdown editor I've seen ever! 🥳 🥳 👏 👏

[BearToCode]

Hi again,

Using the Carta class to build "components" for a vanilla version or other framerworks seems like a great idea! It probably has some limitations, but overall it is much easier and more robust than just compiling the components.

If you just need me to explain the roles of the components and how they work, I can do that easily. I think I could add an header to the various components explaining them, and add descriptions to their functions and properties:

<!-- 
	@description A description of the what the component does and how it does that
-->
<script lang="ts">
  /**
   * A description of the property.
   */
  export let prop: Something;
  
  /**
   * What the function does
   * @param a What is a
   * @param b What is b
   */
  function fn(a, b) {
  
  }
</script>

Let me know if something like this would be enough, or if you had another idea in mind. You could obviously contact for any question.

Following your suggestion I created a ko-fi page.

[mithi]

I think I could add an header to the various components explaining them, and add descriptions to their functions and properties

Yes that would be really cool! But if you're doing this just for me, and if it will take too much time from more important things, then please don't prioritize this! After familiarizing myself with Svelte more the past few hours I think
I can read and understand the code a bit better and I'll message you if I have any questions or clarifications.

I'm hoping to contribute more to this project in the near future when I'm no longer swamped with work... So no hurry really...

Following your suggestion I created a ko-fi page.

I have made a little donation on your Ko-Fi page, and I'll be making more donations in the future once I get to spend more time playing with this library.

Again, thank you so much for entertaining all my questions! 🙂

I will message you again in the next couple of months 🙂

[BearToCode]

Thanks a lot for your donation! Looking forward to working with you 😄

[warren-bank]

just a quick drive-by comment regarding this issue..

comparison of this project to another project that uses Svelte and publishes a vanilla JS library:

carta-md

• jsdelivr: carta-md
• jsdelivr: carta-md/dist
• jsdelivr: carta-md/dist/index.js
  • npm package includes raw .svelte files
• github: package.json/scripts.build
  • npm run build calls: node scripts/build.js
• github: scripts/build.js
  • foreach directory in packages, call: npm run build
• github: packages/carta-md/package.json/scripts.build
  • npm run build calls: svelte-kit sync && svelte-package

bigger-picture

• github: README#install
• jsdelivr: bigger-picture
• jsdelivr: bigger-picture/dist
• jsdelivr: bigger-picture/dist/bigger-picture.min.js
  • npm package only includes transpiled javascript
• github: package.json/scripts.build
  • build scripts use rollup (and sass)
• github: package.json/devDependencies
  • dev dependencies include several rollup plugins, including one specifically for Svelte

summary:

• bigger-picture is a front-end library written in Svelte that compiles to vanilla JS using rollup as a build tool

example:

vanilla-bigger-picture.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bigger-picture.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bigger-picture.min.css" rel="stylesheet" />

  <script>
    document.addEventListener("DOMContentLoaded", (event) => {
      // initialize
      let bp = window.BiggerPicture({
        target: document.body,
      })

      // open (will be a child of the target element above)
      bp.open({
        items: document.querySelectorAll('#images a'),
      })
    })
  </script>
</head>
<body>
  <div id="images">
    <a
      href="https://assets.henrygd.me/bp/images/joshua-sukoff-sZ5zbZMAYJs-unsplash.jpg"
      target="_blank"
      data-img="https://assets.henrygd.me/bp/images/joshua-sukoff-sZ5zbZMAYJs-unsplash_1133.jpg 1133w, https://assets.henrygd.me/bp/images/joshua-sukoff-sZ5zbZMAYJs-unsplash.jpg 1667w"
      data-thumb="https://assets.henrygd.me/bp/images/joshua-sukoff-sZ5zbZMAYJs-unsplash_thumb.jpg"
      data-height="2500"
      data-width="1667"
      data-alt="Antelope Canyon"
    >
      <img
        src="https://assets.henrygd.me/bp/images/joshua-sukoff-sZ5zbZMAYJs-unsplash_thumb.jpg"
        alt="Antelope Canyon"
        loading="lazy"
      />
    </a>
  </div>
</body>
</html>

assertion:

• the same could be done for carta-md
• if the @cartamd/ plugins don't include any Svelte components, their current npm packages could probably be used as-is

[warren-bank]

just for fun.. I spent a little time this evening attempting to make a browser build.
early days, but the results are looking pretty successful.
links..

• github: directory
• github: test build
• github: html demo code
• githack: html demo
  • using githack CDN to view the page since my branch isn't configured to use Github Pages

---

update:
I spent a little more time on this, and now all plugins are built and working.
My demo is a few commits behind master, but the important thing is the build script.. which works perfectly.
I'll push an update for v4.3.0 tomorrow.

new links:

• github: html demo code
• githack: html demo

just an fyi..
the following packages export inline css, which rollup doesn't like..
and I need to remove before running a build:

• carta-md
• plugin-anchor
• plugin-emoji
• plugin-slash

update: though the last comment is still true, I've since updated the rollup config to automatically remove this export while processing the aforementioned files

[warren-bank]

refreshed browser build..

• from commit 088274f
  • even with tag @cartamd/plugin-tikz-v4.1.6
  • using builds
• github: html demo code
  • githack: html demo

[mithi]

Hi @warren-bank ,

This looks really cool! I'll try it out once my schedule clears up!
Keep up the good work!