Editing markdown documentation with buttons #12217
Conversation
🧪 Storybook is successfully deployed!📊 Dashboard:
|
| <SvgButton name="header1" title="Header 1" @click.stop="markdownEditor?.toggleHeader(1)" /> | ||
| <SvgButton name="header2" title="Header 2" @click.stop="markdownEditor?.toggleHeader(2)" /> | ||
| <SvgButton name="header3" title="Header 3" @click.stop="markdownEditor?.toggleHeader(3)" /> | ||
| <SvgButton name="quote" title="Quote" @click.stop="markdownEditor?.toggleQuote()" /> | ||
| <SvgButton | ||
| name="bullet-list" | ||
| title="Bullet list" | ||
| @click.stop="markdownEditor?.toggleList('unordered')" | ||
| /> | ||
| <SvgButton | ||
| name="numbered-list" | ||
| title="Numbered list" | ||
| @click.stop="markdownEditor?.toggleList('ordered')" | ||
| /> |
There was a problem hiding this comment.
The block type should probably be a dropdown, top-level toggle buttons for everything would get unwieldy. We should be able to use the same menu code we used for Lexical:
https://github.com/enso-org/enso/pull/11469/files#diff-c9082ea1842a4e8a415bc841239cb0866d6d8ef678c957fe94b033e8cc8ef6d9
| toggleHeader, | ||
| toggleQuote, | ||
| toggleList, |
There was a problem hiding this comment.
DocumentationEditor is the component that integrates the markdown editor with the graph editor. Pure markdown-editing functionality should be in the MarkdownEditorImpl, so that the dashboard can use it too (once they enable editing as planned).
We should render the toolbar in this component. Instead of exposing the formatting functions, we can use slots to inject the functionality that isn't shared between graph editor and dashboard (fullscreen, insert-image).
| */ | ||
| const setupEditor = (source: string) => { | ||
| const selectionStart = source.indexOf('|') | ||
| const selectionEnd = source.lastIndexOf('|') |
There was a problem hiding this comment.
This will be off by 1 because it is computed before the replaceAll.
There was a problem hiding this comment.
Nice catch, though it does not matter match in these tests. We are not too worried about tricky edge-cases, as even in the worse case edits are easily reversible even by hand.
| const vueHost = { | ||
| register: () => ({ | ||
| unregister: () => {}, | ||
| update: () => {}, | ||
| }), | ||
| teleportations: new Map(), | ||
| } | ||
| view.dispatch({ effects: setVueHost.of(vueHost) }) |
There was a problem hiding this comment.
These tests shouldn't need a VueHost.
| const view = setupEditor(source) | ||
| toggleList(view, 'ordered') | ||
| expect(view.state.doc.toString()).toEqual(expected) | ||
| }) |
There was a problem hiding this comment.
I don't see any tests for checking what the "current" block type is identified as when different text is selected--that's complex and I think important to cover.
There was a problem hiding this comment.
As discussed, not needed. We might want to implement it in the future, but I don’t see much point given instant visual feedback in the editor, highlighting the block markers.
| let listIndex = 0 | ||
| for (let i = startLine.number; i <= endLine.number; i++) { | ||
| const line = view.state.doc.line(i) | ||
| const src = view.state.doc.toString() |
There was a problem hiding this comment.
This builds a string from the entire document text, do we need to do it in a loop?
There was a problem hiding this comment.
Nice catch, it was a leftover from refactoring. Fixed.
| const orderedList = getType(cx, 'OrderedList') | ||
| if (cx.block.type != orderedList) | ||
| cx.startContext(orderedList, line.basePos, line.text.charCodeAt(line.pos + size - 1)) | ||
| const newBase = getListIndent(line, line.pos + size) | ||
| cx.startContext(getType(cx, 'ListItem'), line.basePos, newBase - line.baseIndent) | ||
| cx.addNode(getType(cx, 'ListMark'), cx.lineStart + line.pos, cx.lineStart + line.pos + size) | ||
| cx.addNode(getType(cx, 'ListMark'), cx.lineStart + line.pos, cx.lineStart + line.pos + length) |
There was a problem hiding this comment.
I'd like to see ensoMarkdown.test.ts coverage for any changes we make to the parsers
There was a problem hiding this comment.
Added coverage for this change (calculation of numbered list marks was incorrect)
vitvakatu
force-pushed
the
wip/vitvakatu/markdown-buttons
branch
from
bd0ae98 to
97d6940
Compare
Pull Request Description
Closes #11969
markdown-editing-dropdown.mp4
Checklist
Please ensure that the following checklist has been satisfied before submitting the PR:
Scala,
Java,
TypeScript,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
or the Snowflake database integration, a run of the Extra Tests has been scheduled.