search

BearToCode / carta

A lightweight, fast and extensible Svelte Markdown editor and viewer.
https://beartocode.github.io/carta/
MIT License
481 stars 23 forks source link

Lib Version for native html #37

Open pnegahdar opened 10 months ago

pnegahdar commented 10 months ago

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 commented 10 months ago

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 commented 6 months ago

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:

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..

BearToCode commented 6 months ago

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:

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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

warren-bank commented 5 months ago

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](https://www.jsdelivr.com/package/npm/carta-md) * [jsdelivr: carta-md/dist](https://www.jsdelivr.com/package/npm/carta-md?tab=files&path=dist) * [jsdelivr: carta-md/dist/index.js](https://cdn.jsdelivr.net/npm/carta-md@4.2.1/dist/index.js) - npm package includes raw _.svelte_ files * [github: package.json/scripts.build](https://github.com/BearToCode/carta/blob/carta-md-v4.2.1/package.json#L15) - `npm run build` calls: `node scripts/build.js` * [github: scripts/build.js](https://github.com/BearToCode/carta/blob/carta-md-v4.2.1/scripts/build.js) - foreach directory in _packages_, call: `npm run build` * [github: packages/carta-md/package.json/scripts.build](https://github.com/BearToCode/carta/blob/carta-md-v4.2.1/packages/carta-md/package.json#L22) - `npm run build` calls: `svelte-kit sync && svelte-package`
bigger-picture * [github: README#install](https://github.com/henrygd/bigger-picture/tree/v1.1.17#install) * [jsdelivr: bigger-picture](https://www.jsdelivr.com/package/npm/bigger-picture) * [jsdelivr: bigger-picture/dist](https://www.jsdelivr.com/package/npm/bigger-picture?tab=files&path=dist) * [jsdelivr: bigger-picture/dist/bigger-picture.min.js](https://cdn.jsdelivr.net/npm/bigger-picture@1.1.17/dist/bigger-picture.min.js) - npm package only includes transpiled javascript * [github: package.json/scripts.build](https://github.com/henrygd/bigger-picture/blob/v1.1.17/package.json#L60-L68) - build scripts use `rollup` (and `sass`) * [github: package.json/devDependencies](https://github.com/henrygd/bigger-picture/blob/v1.1.17/package.json#L70-L84) - dev dependencies include several `rollup` plugins, including one specifically for _Svelte_

summary:

example:

vanilla-bigger-picture.html ```html ```

assertion:

warren-bank commented 5 months ago

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..

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:

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

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 commented 5 months ago

refreshed browser build..

mithi commented 5 months ago

Hi @warren-bank ,

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