Using a third party rich text editor like quill for textBlock

GoJS
1

Is there any possibility of using a rich text editor like quill for text inside a shape.

It would be great if we could parse html-like element inside go.ObjectData keys, something like below:-

public diagramNodeData: Array<go.ObjectData> = [

{ key: '<quill-editor>Alpha<quill-editor>', color: 'lightblue', arr: [1, 2] },

{ key: 'Beta', color: 'orange' }]
2

Yes, you can implement your own custom text editors. Two of them are shown in Text Editing Examples

I suggest that you use a separate property to indicate which kind of editor to use, rather than mixing the text string with the editor choice in a single property value.

3

Thanks @walter, but I have already tried the customTextEditingTool but still the editor fails…

Just to confirm from gojs, this is what I have used

go.Diagram {

    const $ = go.GraphObject.make;

    const dia = $(go.Diagram, {
     //assume quillEditor to be already defined
      'textEditingTool.defaultTextEditor': quillEditor,

      'undoManager.isEnabled': true,

and then in the textBlock…

$(go.TextBlock, { margin: 8, editable: true, textEditor:  quillEditor},

            new go.Binding('text', 'key'))

If this is correct, seems like there is a issue with the angular lifecycle in which I have instantiated the editor.

4

How did you define and then import quillEditor?

5

@walter In app.component.ts:-

I have imported like this:-

import * as Quill from 'quill';

and then initialized as:

const quillEditor: any = Quill

the error when I try to edit the text inside the textBlock is:

core.js:5845 ERROR TypeError: Cannot read property 'show' of undefined
    at Vg.push../node_modules/gojs/release/go.js.Vg.doActivate (go.js:505)
6

A text editor in GoJS must be an instance of HTMLInfo. GoJS HTML Interaction -- Northwoods Software

Such a text editor could make use of Quill. But only your code would know how to use Quill, which we had never heard of until now.

7

Okay… so anything else to achieve some rich texting for textBlock inside a node?

8

If you want to use Quill, go ahead.

But I hope you understand that the point of a TextBlock is to provide a block of text with a single set of attributes. TextBlocks do not render markup.

9

Yes. Understood! Thanks for these quick replies and support. Really appreciate it! :)