Any plan to support double brackets? #Roam

[taurenshaman]

Version

2.1.0

Development Environment

Opera; Firefox. OS: Windows 10.

Current Behavior

There is no similar behaviors. Recently many people are talking about Roam Research, who improved Wiki Link: [[]] and brought features to outline editor. So will you make some original support for these keywords [[]], (()), {{}}?

Expected Behavior

When user types [[ or {{ or ((, there should be a suggestion list. Maybe these 3 keys can be written to 3 plugins with options of API Uri and callback? And developers can implement their own callbacks like Auto Suggestion.

Try

1. How to subscribe KeyUp/KeyPress event to the Editor? There is no silimar events in the options according to the list: https://nhn.github.io/tui.editor/latest/ToastUIEditor
2. In order to implement the auto suggestion, maybe I should use LayerPopup? But I saw the popups are all about Toolbar item: https://github.com/nhn/tui.editor/tree/master/apps/editor/src/js/ui So can I create a popup (List) in the content area using LayerPopup while the user is typing [[ ?

[jack9603301]

What do you want to do with this extension syntax

[taurenshaman]

What do you want to do with this extension syntax

When a user wanna reference one of their own onte, they can use this similar syntax. e. g. while typing [[toastui]] will show a auto suggestion list about "toastui", the reference will be added to the article markdown after the user select one from the list. The key is At home Suggestion of the articles created by the user in the site. No one wanna death and copy links, the easiest way is auto suggestion. I think this syntax will become to some standards in fact like @ mention.

[jack9603301]

Where do I extract the auto suggestion list?? @taurenshaman Do you want to make an inter article quotation?

[taurenshaman]

Where do I extract the auto suggestion list?? @taurenshaman Do you want to make an inter article quotation?

Search/load and show results from the server of course. It worked like Auto Suggestion in a search engine. e.g. I created some notes articles with titles:

• ToastUI: editor intro
• ToastUI: grid intro
• ToastUI: chart intro
• ToastUI: calendar intro
• ToastUI: image editor intro

Then if I'm writing a new article, and when I'm typing [[toas]], there should pop up a suggestions list at cursor position.

Screenshot of RoamResearch (When I'm typing "c", it pops up a list of my notes):

After I select on item:

[jack9603301]

Look at what you mean. You seem to want to make a function of cross reference and automatic suggestion between articles. Am I right? These suggestion lists come from the results of retrieval, analysis, extraction and de duplication of article lists created by the user server itself? If I understand something wrong, please correct it!

[jack9603301]

If I understand correctly, I can reply to you, because then I can provide some suggestions!

[taurenshaman]

If I understand correctly, I can reply to you, because then I can provide some suggestions!

welcome! Thank you very much!

[jack9603301]

If there is no mistake in my understanding, you should implement a dedicated asynchronous event and data source interface to allow users to use different double brackets after triggering the corresponding events of [[]], (()), {{}}. Carry out data processing and search de duplication operation, and use the asynchronous method set by the user through the interface in advance to return your so-called intelligent recommendation list. Because the user's use scenario and code environment are different, the preparation and retrieval of related lists should be completed by the user interface, and avoid blocking the editor during the interface call, so as to improve the user experience Toast tui.editor should only be responsible for generating events, calling the user specified interface, getting the user interface return, and displaying the data, cross referencing and rendering according to the list information returned by the user! If there are other questions, you can reply to this post!

[taurenshaman]

@jack9603301 I know your answer. But my question is about tui.editor only. You can see the last part of this issue: "Try".

1. The docs shows no similar events like KeyUp/KeyPress.
2. about the component LayerPopup.

In fact I wanna read some example code of tui.editor about KeyUp/KeyPress events and Popups in content area.

[jack9603301]

@taurenshaman Feature requests can be published to support such functions from within tui.editor!

[seonim-ryu]

@taurenshaman I'll answer these questions.

1. The docs shows no similar events like KeyUp/KeyPress.
2. about the component LayerPopup.

For the first question, I think you can use the change event. (Internally, the keyup event is used, but it is not an official API) And when the event occurs, you can get an instance of TextObject (It is MdTextObject in Markdown mode or WwTextObject in WYSIWYG mode) by calling the getTextObject() method. You can use this object to know the current entered value and cursor information, and I think you can use this information to determine whether a double bracket is entered.

const editor = new toastui.Editor({
  // ...
  events: {
    change: ev => {
      const textObj = editor.getTextObject();
      const range = editor.getRange();

      console.log(range);

      // textObj.replaceContent('hello editor world!');
    }
  }
});

And for the second question, the Editor doesn't provide APIs to customize the layer popup used internally. So I think you need to make the layer you want to float directly as an element.

The image below is an example of using the Editor in service, and I think it is similar to the function you want to implement. The way implemented here is binding the mouse event and getting the position value to bring up the layer directly.

By the way, we need to consider how the user can customize the layer popup in the Editor.

I would appreciate it once you confirm the above comments!

[rrjanbiah]

@seonim-ryu

Apologies for hijacking this issue. Do you have the source of below UI available anywhere in GitHub? This looks really nice.

[seanwang1998]

@taurenshaman I'll answer these questions.

1. The docs shows no similar events like KeyUp/KeyPress.
2. about the component LayerPopup.

For the first question, I think you can use the change event. (Internally, the keyup event is used, but it is not an official API) And when the event occurs, you can get an instance of TextObject (It is MdTextObject in Markdown mode or WwTextObject in WYSIWYG mode) by calling the getTextObject() method. You can use this object to know the current entered value and cursor information, and I think you can use this information to determine whether a double bracket is entered.

const editor = new toastui.Editor({
  // ...
  events: {
    change: ev => {
      const textObj = editor.getTextObject();
      const range = editor.getRange();

      console.log(range);

      // textObj.replaceContent('hello editor world!');
    }
  }
});

And for the second question, the Editor doesn't provide APIs to customize the layer popup used internally. So I think you need to make the layer you want to float directly as an element.

The image below is an example of using the Editor in service, and I think it is similar to the function you want to implement. The way implemented here is binding the mouse event and getting the position value to bring up the layer directly.

By the way, we need to consider how the user can customize the layer popup in the Editor.

I would appreciate it once you confirm the above comments! I really want to achieve the following effect： I used the code you said to test, but it reminded me that I did not have this method, my version is 3.1.0：

[seanwang1998]

@seonim-ryu

Apologies for hijacking this issue. Do you have the source of below UI available anywhere in GitHub? This looks really nice.

Have you solved this problem? I now need to implement this functionality in the editor as well

[GMadorell]

@seanwang1998 Did you find anything related to this? I'm interested in working on sth similar.