simplajs / simpla-richtext-behavior Goto Github PK
View Code? Open in Web Editor NEWBehavior to add richtext editing to an element
Home Page: https://www.simpla.io
License: MIT License
Behavior to add richtext editing to an element
Home Page: https://www.simpla.io
License: MIT License
Just wondering, since this is a pure JS lib, would it make sense to distribute as both a .min.js
and a .html
file, like simpla-paths
?
Pressing enter or escape when focussed on an image should blur the image/editor, more intuitive behavior.
Right now the placeholder is treated as a single node, which the placeholder can be placed to the right of. This means that if you tap the editor, or delete the content in the editor, the cursor often ends up to the right of the placeholder, which looks all kinds of broken.
A few hacky patches were done in #16, but that's certainly not a long term fix. One use case (deleting content) isn't resolved at all, and others have FOUC flashes as the cursor is shoved back to the left.
This seems to be a regression from when ProseMirror was bundled with simpla-text, so worth exploring what's changed.
Under new collection, simpla-element-authors
We need to interact with injected images, either by making them top-level nodes (slotted styling) or injecting stylesheets.
Few things:
A lot of this will be the same for other configurable embeds - eg: OEmbed/videos/etc
Right now config options are only available in the constructor, and cannot be updated after initialization. The returned editor instance needs a method to update properties after initialisation, to be used in element property observers.
Something like
this._editor.setOption('placeholder', 'Enter your text...');
Not sure if this is possible to do in a general way, but would be nice to be able to declaratively bind to subprops on the returned instance, rather than having to programatically setup listeners using the inbuilt emitter.
Eg:
<button
class="range__tool"
data-format="bold"
active$="[[editor.plugins.bold.applied]]">
...
</button>
This shouldn't be a Simpla behavior, it's really just a general inline-editing richtext plugin.
@bedeoverend thoughts? Can live either in simplaio repo or your personal one IMO.
Use-case: embed image on first (and only) line of article
Result: Can't focus on anything but the image, because no text nodes are preserved
Marginally related to #15, it's impossilbe to remove the first line of an article (and its format, if it had one) if an image is embedded after it, since there's no way to place the cursor in the node immediately preceding an image, and pressing forward delete removes the image rather than the focussed line.
You can drag and drop the image onto the first line, but this isn't consistent across browsers, or intuitive.
Repro screencap:
Lists currently generate the following markup
Content:
- List item
Output:
<ul>
<li>
<p>List item</p>
</li>
</ul>
It should generate this markup:
<ul>
<li>List item</li>
</ul>
This is breaking for any case where you have other content inside list items and are expecting inline content (as would be intuitively expected). Case in point: custom list bullets in ::before
elements on Simpla's Privacy Policy. Using simpla-article results in a newline between the bullet and the list item content, since paragraphs are blocks by default.
Doesn't look like history plugin is working - or at least the keymappings for undo / redo aren't working, might not necessarily mean the entire history plugin is failing.
Since the alignment styles are written inline and the dev would have to use !important
to overwrite them, they shouldn't set anything they don't absolutely have to.
Therefore, center aligned images should be:
display: block;
margin-left: auto;
margin-right: auto;
When embedding an image it should be auto focussed so the user can align it straight away.
In simpla-article, we're focusing the editor before applying any format. Given how much this is repeating things - would it make sense to just auto focus on the editor before any format / embed is used?
This could break things if controlling it imperatively, as it will just clobber focus, even though it might be needing to format / embed imperatively outside of current live selection...I feel like this is the edge case. But it also just feels messy, it doesn't feel like embed / formats should care about where the current focus is.
It'd probably make sense to add an autoFocus
prop which is set to true by default, and automatically re-focuses the editor whenever a command is made on it.
cc/ @seaneking
Removing all the content between two format tags should also remove the format.
Repro of where this is a problem:
Right now when you select an img node, it'll be overlaid with the normal blue selection box. This selection should be transparent - ProseMirror normally achieves this by getting you to include their stylesheet and setting ::selection
to be transparent when selecting nodes.
Also because images are inserted inside p
and in Shadow DOM v1 you can only style top level child nodes, you can't style images inside the element using richtext behavior e.g. simpla-article
.
The most likely workaround will be a similar behavior to what we're doing with the placeholder plugin, where we inject style
tags into the element using ProseMirror widgets. It's pretty messy, but it'll work, and ProseMirror can handle ensuring the style tag doesn't get clobbered.
Currently we've got a few different stylesheets being injected by plugins e.g. placeholder styles, pre-wrap styles. Plus there're also styles that should be applied to images, which is being done over on simpla-article
but in reality should be done in this behavior.
All the plugins should be able to define styles that are (conditionally) applied, and all be injected into the one stylesheet. That stylesheet should also only be applied once per root to avoid unnecessary stylesheets.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.