stable

Clone or download

Read-only

Refactoring: build format selector with lit-html

Part of story #18337 markdown replace text How to test: - rebuild rich-text-editor lib - rebuild tracker plugin No functional change expected in Rich text editors in the artifact view. Notes: Vanilla DOM API is replaced by lit-html because in the next commits, the rich text editors will have a lot of interactions and moving parts. Switching to/from Preview enables or disables buttons, it hides the textarea, it calls a remote API (with loading, errors, etc.) Seeing those conditions, Vanilla DOM becomes too cumbersome for that. lit-html will allow us to do all this much more easily. It also has a small size, it should not inflate our bundle size too much. The popover is now handled by a dedicated custom element. lit-html does not have a "mounted" lifecycle callback as Vue does. But now that IE11 is out of our support zone, we can finally leverage custom elements. Custom elements have a "connectedCallback" which is equivalent. As a note to the reviewer: I know that we should probably use Shadow DOM instead of querying the element's children, but it raises difficult challenges for now. As we don't have CSS Custom properties set up, we cannot style the button (or the popover content). Using Light DOM is a compromise until such time when we can properly style elements. I've made the choice to keep lit-html code separate from the rest of the code by using an intermediary "adapter". Code using it must pass plain old javascript "Presenters", that way if we decide (again) to change the lib, we should hopefully only have to rewrite the Renderer and the adapter. Change-Id: I58057408dce0d7ce804b361dbdebcd4aba4d0899

Modified Files

Name
M plugins/tracker/scripts/lib/rich-text-editor/jest.config.js +2 −0 Go to diff View file
M plugins/tracker/scripts/lib/rich-text-editor/package-lock.json +29 −0 Go to diff View file
M plugins/tracker/scripts/lib/rich-text-editor/package.json +3 −1 Go to diff View file
M plugins/tracker/scripts/lib/rich-text-editor/src/RichTextEditorFactory.ts +7 −3 Go to diff View file
M plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/FlamingParrotDocumentAdapter.test.ts +8 −119 Go to diff View file
M plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/FlamingParrotDocumentAdapter.ts +4 −92 Go to diff View file
D plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/FormatSelectorBuilder.test.ts +0 −189 Go to diff View file
D plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/FormatSelectorBuilder.ts +0 −111 Go to diff View file
M plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/FormatSelectorInterface.ts +1 −1 Go to diff View file
D plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/SyntaxHelperButtonToggler.ts +0 −34 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/EditorAreaRenderer.test.ts +115 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/EditorAreaRenderer.ts +79 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/EditorAreaState.test.ts +68 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/EditorAreaState.ts +49 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/FlamingParrotEditorAreaBuilder.ts +39 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/FlamingParrotPopoverButtonElement.test.ts +62 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/FlamingParrotPopoverButtonElement.ts +61 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/__snapshots__/lit-html-adapter.test.ts.snap +131 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/commonmark-syntax-helper.ts +135 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/lit-html-adapter.test.ts +157 −0 Go to diff View file
A plugins/tracker/scripts/lib/rich-text-editor/src/format-selector/editor-area/lit-html-adapter.ts +141 −0 Go to diff View file
D plugins/tracker/scripts/lib/rich-text-editor/src/helper/commonmark-syntax-helper.ts +0 −137 Go to diff View file
M plugins/tracker/scripts/lib/rich-text-editor/src/index.ts +1 −1 Go to diff View file
R plugins/tracker/scripts/lib/rich-text-editor/themes/popovers.css Go to diff View file