![]() ![]() That being said, selection state and text changes don’t usually trigger anything in the document to be updated, so they tend to be fast enough not to be noticeable in my testing*, even on large documents. I haven’t benchmarked it or anything, but there is definitely some performance cost. I avoided ports because of the extra annoyance of making users copy port code for every project.Ĭustom selection events and change events from mutation observers are the majority of the messages processed by the editor. Thanks for the question! Just for clarification, js to elm communication in the toolkit happens through webcomponents and custom events. I think there would be more advantage in using this library for something like that.Īnyway, I hope that’s helpful, thank you for the support on the project and good luck with your in-browser code editor! I look forward to using it when comes out. an editor which is aware of its underlying structure. I think the overlap of a rich text editor and a code editor comes in the form of a structural editor, e.g. However, for a rich text editor which needs to be aware of its own markup and schema, CodeMirror’s approach is too basic. CodeMirror’s approach of using a hidden text area, simulating selection, and only rendering what’s visible is much more efficient, especially for larger documents. You can actually compare the differences in these approaches by looking at Prose Mirror and Code Mirror, both written by the same author but one is used for building rich text editors and the other as a versatile code editor. If that’s the case for your editor, there are a lot of simplifications and performance optimizations you can do with an approach that doesn’t use contenteditable or a nested model, and instead uses a hidden textarea for input like Ace or Code Mirror. the data is really just text that’s turned into an AST later, and markup is more of a decoration added after the fact. I think it’s possible to make a code editor with this, but there may be a few issues of performance and complexity that you’ll have to deal with eventually.Ī code editor usually only cares about text, e.g. In any case, I’ll definitely be trying this out in a project very soon. I was wondering if you had any plans or interest in adding such a feature in the future. ![]() So if you have some container node that comprises paragraphs, you can stipulate that it must have at least one paragraph, or two paragraphs, or that the paragraph must come after a heading, etc. One thing about “content expressions” in ProseMirror is that they not only allow you to determine which child nodes are allowed, but give you control over how those children are arranged and used. It seems like you’re doing something pretty similar in Definitions with the way you set allowedGroups and allowedMarks. So in ProseMirror one defines what children a particular node type can have through “content expressions”. ![]() I actually had one question related to that. I’ve been hoping to see a ProseMirror-like package in Elm, so this is all very exciting to me, especially the fact that you can define your own custom schemas. I’d also appreciate any feedback you can give or interest in contributing to the project. If there’s interested, I’ll write more details about the implementation, like syncing contenteditable and the Elm virtual DOM, updating selection state, resolving events in a way that works across browser and platforms, the quirks with Android, and many more. I appreciate all packages, tools, and resources out there that the Elm community has created that helped me build this. ![]() The editor’s model is defined and validated by a programmable specification that allows you to create a custom tailored editor that fits your needs. This package treats contenteditable as an I/O device, and uses browser events and mutation observers to detect changes and update itself. A similar project for JavaScript is ProseMirror. In short, this is not a package to use as a drop in editor, but more a package to create your own custom rich text editor. With that feedback and some studying of other rich text editor frameworks, namely Trix, DraftJS, and most of all ProseMirror, I was able to get to v1 of this package. I’m proud to announce a new package for Elm for creating rich text editors!īackground: About 4 months ago, I created a prototype rich text editor in Elm and discussed it here. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |