Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | 1x 1x 1x 1x 1x 1x 109x 109x 109x 109x 109x 105x 105x 105x 105x 74x 74x 108x 108x 108x 1x 1x 108x 108x 108x 108x 108x 108x 108x 77x 77x 77x 23x 23x 23x 77x 77x 77x 77x 77x 74x 74x 74x 77x 1x 106x 1x 363x 2x 1x 108x 108x 108x 108x 108x 1x 1x 109x | import { ChangeSource, getObjectKeys, setColor } from 'roosterjs-content-model-dom'; import { createAriaLiveElement } from '../../utils/createAriaLiveElement'; import type { IEditor, LifecyclePluginState, PluginEvent, PluginWithState, EditorOptions, RewriteFromModel, } from 'roosterjs-content-model-types'; const ContentEditableAttributeName = 'contenteditable'; const DefaultTextColor = '#000000'; const DefaultBackColor = '#ffffff'; /** * Lifecycle plugin handles editor initialization and disposing */ class LifecyclePlugin implements PluginWithState<LifecyclePluginState> { private editor: IEditor | null = null; private state: LifecyclePluginState; private initializer: (() => void) | null = null; private disposer: (() => void) | null = null; private adjustColor: () => void; /** * Construct a new instance of LifecyclePlugin * @param options The editor options * @param contentDiv The editor content DIV */ constructor(options: EditorOptions, contentDiv: HTMLDivElement) { // Make the container editable and set its selection styles if (contentDiv.getAttribute(ContentEditableAttributeName) === null) { this.initializer = () => { contentDiv.contentEditable = 'true'; contentDiv.style.userSelect = 'text'; }; this.disposer = () => { contentDiv.style.userSelect = ''; contentDiv.removeAttribute(ContentEditableAttributeName); }; } this.adjustColor = options.doNotAdjustEditorColor ? () => {} : () => { this.adjustContainerColor(contentDiv); }; this.state = { isDarkMode: !!options.inDarkMode, shadowEditFragment: null, styleElements: {}, announcerStringGetter: options.announcerStringGetter, }; } /** * Get a friendly name of this plugin */ getName() { return 'Lifecycle'; } /** * Initialize this plugin. This should only be called from Editor * @param editor Editor instance */ initialize(editor: IEditor) { this.editor = editor; // Set content DIV to be editable this.initializer?.(); // Set editor background color for dark mode this.adjustColor(); // Let other plugins know that we are ready const rewriteFromModel: RewriteFromModel = this.state.rewriteFromModel ?? { addedBlockElements: [], removedBlockElements: [], }; this.editor.triggerEvent('editorReady', rewriteFromModel, true /*broadcast*/); delete this.state.rewriteFromModel; // Initialize the Announce container. this.state.announceContainer = createAriaLiveElement(editor.getDocument()); } /** * Dispose this plugin */ dispose() { this.editor?.triggerEvent('beforeDispose', {}, true /*broadcast*/); getObjectKeys(this.state.styleElements).forEach(key => { const element = this.state.styleElements[key]; element.parentElement?.removeChild(element); delete this.state.styleElements[key]; }); const announceContainer = this.state.announceContainer; Eif (announceContainer) { announceContainer.parentElement?.removeChild(announceContainer); delete this.state.announceContainer; } if (this.disposer) { this.disposer(); this.disposer = null; this.initializer = null; } this.editor = null; } /** * Get plugin state object */ getState() { return this.state; } /** * Handle events triggered from editor * @param event PluginEvent object */ onPluginEvent(event: PluginEvent) { if ( event.eventType == 'contentChanged' && (event.source == ChangeSource.SwitchToDarkMode || event.source == ChangeSource.SwitchToLightMode) ) { this.adjustColor(); } } private adjustContainerColor(contentDiv: HTMLElement) { Eif (this.editor) { const { isDarkMode } = this.state; const darkColorHandler = this.editor.getColorManager(); setColor( contentDiv, DefaultTextColor, false /*isBackground*/, isDarkMode, darkColorHandler ); setColor( contentDiv, DefaultBackColor, true /*isBackground*/, isDarkMode, darkColorHandler ); } } } /** * @internal * Create a new instance of LifecyclePlugin. * @param option The editor option * @param contentDiv The editor content DIV element */ export function createLifecyclePlugin( option: EditorOptions, contentDiv: HTMLDivElement ): PluginWithState<LifecyclePluginState> { return new LifecyclePlugin(option, contentDiv); } |