Giters

edtr-io / edtr-io

Edtr.io is an open source WYSIWYG in-line web editor written in React. Its plugin architecture makes Edtr.io lean and extensive at the same time.

Home Page:https://edtr.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

read-only or non-editable elements

markhats opened this issue · comments

commented

Is it possible to set certain (but not all) text or math elements on a page to be read only? This would mean that they would be visible but not editable. For example, the MathQuill editor would not be launched when a read-only math element was focused. Can this be set in the state - something like the following maybe?

{type: "math", src: "y=a\sin\left(bx\right)", inline: false, readOnly: true, children: [{text: ""}]}

Or is there another way to do this?

Thanks

commented

Not at the moment, no.

  • If you need it right now, the only way would be to fork our text plugin to include that functionality.
  • Another way: we already allow users to disable specific slate plugins (via config.plugins that is passed to createTextPlugin). We could additionally allow users to add additional slate plugins (so you'd be able to disable our core math plugin and insert your own functionality). We'd accept PRs for that.
  • If it's not too urgent: we plan to make the text plugin more customizable in our refactoring that also updates Slate to version 0.50+ (so again: you'd be able to only fork our math Slate plugin and extend it to your use case). Unfortunately, I have to timeline for that since the breaking changes in Slate v0.50+ affect our current integration.

If you are fine with making a whole text plugin block read-only (which would be the whole paragraph in our implementation), you'd probably be able to write a wrapper plugin for our text plugin that also saves whether the block should be editable.

If you tell me more about your use case, I might be able to suggest other approaches. Open questions I currently have:

  • Who decides which elements are read-only?
  • Who authors the content that should be read-only?
  • How would a read-only math element in an editable text block work?
commented

My use case is that I have some dynamically generated content, usually in the form of some Latex math. I want to insert this dynamic content into edtr.io as a math element but not allow the user to edit it. As well as the dynamic content, there would be other static text/math content that the user should be able to edit as normal.

Therefore, I need some way of making the dynamic content read-only to the user, although it can and will be updated externally in my app. Some way of also identifying the dynamic content within Edtr.io would also be useful, although I could probably reuse the read-only flag, since there is only likely to be one section of dynamic content.

The simplest way I can see of doing this is via the state, so e.g.

{type: "math", src: "y=a\sin\left(bx\right)", inline: false, readOnly: true, dynamicContentId: "id-1234"  children: [{text: ""}]}

This would allow my app to specify that the dynamic content is read-only and also give it an id, so it can be easily searched for and extracted later from the surrounding static content.

So I guess my answers to your questions for my use case are:

  • My app decides the elements that are read-only and sets them in edtr.io via the state
  • My app generates the read-only content
  • The surrounding text would be editable as normal but the read-only math content wouldn't be. The cursor would just skip over it and it wouldn't be clickable to bring up the MathQuill editor.
commented

I see, that makes sense. #314 (comment) still holds, though. You'd need to add a slate plugin to the text plugin that is able to handle the additional readOnly attribute.

commented

Thanks for the info. I need to get my head around the codebase a bit more, I think, before attempting this. Should I be looking in the katex plugin to implement this?
https://github.com/edtr-io/edtr-io/blob/master/packages/plugins/text/src/plugins/katex/index.tsx

commented

Thanks for the info. I need to get my head around the codebase a bit more, I think, before attempting this. Should I be looking in the katex plugin to implement this?
https://github.com/edtr-io/edtr-io/blob/master/packages/plugins/text/src/plugins/katex/index.tsx

Yep, basically:

  • Fork packages/plugins/text.
  • Extend packages/plugins/text/src/plugins/katex with your functionality.
commented

(housekeeping: no activity for a long time or not relevant any more)