@lvce-editor/server 0.0.2

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerCursor.js

@@ -0,0 +1,129 @@
+import * as Platform from '../Platform/Platform.js'
+
+const create$Cursor = () => {
+  const $Cursor = document.createElement('div')
+  $Cursor.className = 'EditorCursor'
+  return $Cursor
+}
+
+const render$Cursor = ($Cursor, $Texts, cursor) => {
+  $Cursor.style.top = `${cursor.top}px`
+  const range = document.createRange()
+  if (cursor.leftIndex === -1) {
+    console.warn('cursor left is negative')
+    $Cursor.style.left = `0px` // TODO need to compute column width, this would only work for monospace fonts
+    return
+  }
+  const $Row = $Texts.children[cursor.topIndex]
+  if (!$Row) {
+    console.warn('no row', cursor, $Row)
+    return
+  }
+  const $Node = $Row.children[cursor.leftIndex]
+  if (!$Node) {
+    console.warn('no node', cursor, $Row)
+    return
+  }
+  if (cursor.leftIndex === 0 && cursor.remainingOffset === 0) {
+    $Cursor.style.left = `0px`
+  } else {
+    const $TextNode = $Node.firstChild
+    range.setStart($TextNode, cursor.remainingOffset)
+    range.setEnd($TextNode, cursor.remainingOffset)
+    const rect = range.getBoundingClientRect()
+    const left = Math.round(rect.left)
+    $Cursor.style.left = `${left}px`
+  }
+}
+
+const render$CursorsLess = ($Cursors, $Texts, cursors) => {
+  for (let i = 0; i < $Cursors.children.length; i++) {
+    render$Cursor($Cursors.children[i], cursors[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (let i = $Cursors.children.length; i < cursors.length; i++) {
+    const $Cursor = create$Cursor()
+    render$Cursor($Cursor, $Texts, cursors[i])
+    fragment.append($Cursor)
+  }
+  $Cursors.append(fragment)
+}
+
+const render$CursorsEqual = ($Cursors, $Texts, cursors) => {
+  for (let i = 0; i < cursors.length; i++) {
+    render$Cursor($Cursors.children[i], $Texts, cursors[i])
+  }
+}
+
+const render$CursorsMore = ($Cursors, $Texts, cursors) => {
+  for (let i = 0; i < cursors.length; i++) {
+    render$Cursor($Cursors.children[i], $Texts, cursors[i])
+  }
+  const diff = $Cursors.children.length - cursors.length
+  for (let i = 0; i < diff; i++) {
+    $Cursors.lastChild.remove()
+  }
+}
+
+const render$Cursors = ($Cursors, $Texts, cursors) => {
+  if ($Cursors.children.length < cursors.length) {
+    render$CursorsLess($Cursors, $Texts, cursors)
+  } else if ($Cursors.children.length === cursors.length) {
+    render$CursorsEqual($Cursors, $Texts, cursors)
+  } else {
+    render$CursorsMore($Cursors, $Texts, cursors)
+  }
+}
+
+const renderCursorsNative = (state, cursors) => {
+  if (cursors.length > 1) {
+    console.warn('[editor] cannot render more than one native cursor')
+    return
+  }
+  if (cursors.length === 0) {
+    return
+  }
+  const cursor = cursors[0]
+  const $Rows = state.$LayerText
+  const $StartRow = $Rows.children[cursor.rowIndex]
+  let startOffset = 0
+  let $Anchor
+  for (let i = 0; i < $StartRow.children.length; i++) {
+    if (startOffset >= cursor.columnIndex) {
+      console.log({ startOffset })
+      $Anchor = $StartRow.children[i - 1].firstChild
+      startOffset -= $Anchor.textContent.length
+      startOffset = cursor.columnIndex - startOffset
+      break
+    }
+    startOffset += $StartRow.children[i].textContent.length
+  }
+  if (!$Anchor) {
+    $Anchor = $StartRow.children[$StartRow.children.length - 1].firstChild
+    startOffset -= $Anchor.textContent.length
+    startOffset = cursor.columnIndex - startOffset
+  }
+  const selection = document.getSelection()
+  if (
+    selection.anchorNode === $Anchor &&
+    selection.focusNode === $Anchor &&
+    selection.anchorOffset === startOffset &&
+    selection.focusOffset === startOffset
+  ) {
+    return
+  }
+  state.shouldIgnoreSelectionChange = true
+  const documentRange = document.createRange()
+  documentRange.setStart($Anchor, startOffset)
+  documentRange.setEnd($Anchor, startOffset)
+  selection.removeAllRanges()
+  selection.addRange(documentRange)
+}
+
+export const setCursors = (state, cursors) => {
+  if (Platform.isMobileOrTablet()) {
+    renderCursorsNative(state, cursors)
+    return
+  }
+  render$Cursors(state.$LayerCursor, state.$LayerText, cursors)
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerDecoration2.js

@@ -0,0 +1,13 @@
+import * as Layer from './Layer.js'
+
+const create$Row = () => {}
+
+const render$Row = () => {}
+
+export const renderVisibleLines = (state, firstRow, lastRow) => {
+  const isVisible = (decoration) =>
+    decoration.rowIndex >= firstRow && decoration.rowIndex <= lastRow
+  const visibleItems = state.decorations.filter(isVisible)
+  Layer.prerender(state.$LineNumberRows, create$Row, visibleItems.length)
+  Layer.render(state.$LineNumberRows, render$Row, visibleItems)
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerDiagnostics.js

@@ -0,0 +1,55 @@
+const create$Diagnostic = () => {
+  const $Diagnostic = document.createElement('div')
+  $Diagnostic.className = 'EditorDiagnostic'
+  return $Diagnostic
+}
+
+const render$Diagnostic = ($Diagnostic, diagnostic) => {
+  $Diagnostic.style.top = `${diagnostic.top}px`
+  $Diagnostic.style.left = `${diagnostic.left}px`
+  $Diagnostic.style.width = `${diagnostic.width}px`
+  $Diagnostic.style.height = `${diagnostic.height}px`
+}
+
+const render$DiagnosticsLess = ($Diagnostics, diagnostics) => {
+  for (let i = 0; i < $Diagnostics.children.length; i++) {
+    render$Diagnostic($Diagnostics.children[i], diagnostics[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (let i = $Diagnostics.children.length; i < diagnostics.length; i++) {
+    const $Diagnostic = create$Diagnostic()
+    render$Diagnostic($Diagnostic, diagnostics[i])
+    fragment.append($Diagnostic)
+  }
+  $Diagnostics.append(fragment)
+}
+
+const render$DiagnosticsEqual = ($Diagnostics, diagnostics) => {
+  for (let i = 0; i < diagnostics.length; i++) {
+    render$Diagnostic($Diagnostics.children[i], diagnostics[i])
+  }
+}
+
+const render$DiagnosticsMore = ($Diagnostics, diagnostics) => {
+  for (let i = 0; i < diagnostics.length; i++) {
+    render$Diagnostic($Diagnostics.children[i], diagnostics[i])
+  }
+  const diff = $Diagnostics.children.length - diagnostics.length
+  for (let i = 0; i < diff; i++) {
+    $Diagnostics.lastChild.remove()
+  }
+}
+
+const render$Diagnostics = ($Diagnostics, diagnostics) => {
+  if ($Diagnostics.children.length < diagnostics.length) {
+    render$DiagnosticsLess($Diagnostics, diagnostics)
+  } else if ($Diagnostics.children.length === diagnostics.length) {
+    render$DiagnosticsEqual($Diagnostics, diagnostics)
+  } else {
+    render$DiagnosticsMore($Diagnostics, diagnostics)
+  }
+}
+
+export const setDiagnostics = (state, diagnostics) => {
+  render$Diagnostics(state.$LayerDiagnostics, diagnostics)
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerLineNumbers.js

@@ -0,0 +1,12 @@
+import * as Layer from './Layer.js'
+
+const create$Row = () => {}
+
+const render$Row = () => {}
+
+export const renderVisibleLines = (state, firstRow, lastRow) => {
+  const getLabel = (_, index) => index
+  const visibleItems = [...new Array(lastRow - firstRow)].map(getLabel)
+  Layer.prerender(state.$LineNumberRows, create$Row, visibleItems.length)
+  Layer.render(state.$LineNumberRows, render$Row, visibleItems)
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerMarker.js

@@ -0,0 +1,96 @@
+export const addMarker = (state, marker) => {
+  state.selections.push(marker)
+}
+
+const CHAR_WIDTH = 20
+const LINE_HEIGHT = 20
+const WIDTH = 400
+
+const $SelectionCache = []
+
+const allocate$Selection = () => {}
+
+const free$Selections = () => {}
+
+const create$Selection = (x1, x2, i) => {
+  const y = i * LINE_HEIGHT // TODO can to y += LINE_HEIGHT to avoid multiplication
+  const $Selection = document.createElement('div')
+  $Selection.className = 'EditorSelection'
+  $Selection.style.width = `${x2 - x1}px`
+  $Selection.style.height = `${LINE_HEIGHT}px`
+  $Selection.style.transform = `translate(${x1}px, ${y}px)`
+  return $Selection
+}
+
+const getMaxLineLength = (textDocument) => {
+  let max = 0
+  for (const line of textDocument.lines) {
+    if (line.length > max) {
+      max = line.length
+    }
+  }
+  return max
+}
+
+export const update = (state, config) => {
+  const $$Selections = []
+  // TODO don't compute maxlineLength every time, compute once and update if text changes
+  const maxLineLength = getMaxLineLength(state.textDocument)
+
+  // TODO renderer worker should convert selection to useful range
+  // e.g. if end is before start then reverse them so in renderer process it always has correct order
+  // TODO state.sections should always be defined
+  const selections = state.selections || []
+  for (const selection of selections) {
+    if (selection.start.rowIndex === selection.end.rowIndex) {
+      const x1 = selection.start.columnIndex * config.columnWidth
+      const x2 = selection.end.columnIndex * config.columnWidth
+      const $Selection = create$Selection(x1, x2, selection.start.rowIndex)
+      $$Selections.push($Selection)
+    } else {
+      const x1 = selection.start.columnIndex * config.columnWidth
+      const x2 = maxLineLength * config.columnWidth
+      const $Selection = create$Selection(x1, x2, selection.start.rowIndex)
+      $$Selections.push($Selection)
+    }
+    for (
+      let i = selection.start.rowIndex + 1;
+      i < selection.end.rowIndex;
+      i++
+    ) {
+      const x1 = 0
+      const x2 = maxLineLength * config.columnWidth
+      const $Selection = create$Selection(x1, x2, i)
+      $$Selections.push($Selection)
+    }
+    if (selection.start.rowIndex !== selection.end.rowIndex) {
+      const x1 = 0
+      const x2 = selection.end.columnIndex * config.columnWidth
+      const $Selection = create$Selection(x1, x2, selection.end.rowIndex)
+      $$Selections.push($Selection)
+    }
+  }
+  while (state.$LayerMarker.firstChild) {
+    state.$LayerMarker.firstChild.remove()
+  }
+  state.$LayerMarker.append(...$$Selections)
+
+  // const html = []
+  // for (const marker of state.markers) {
+  //   if (marker.startRow !== marker.endRow) {
+  //     if (
+  //       marker.startRow >= config.firstRow &&
+  //       marker.startRow <= config.lastRow
+  //     ) {
+  //       const height = 20
+  //       const width = Math.round(WIDTH - marker.startColumn * CHAR_WIDTH)
+  //       const top = (marker.startRow - config.firstRow) * LINE_HEIGHT
+  //       const left = Math.round(Math.round(marker.startColumn * CHAR_WIDTH))
+  //       html.push(
+  //         `<div class="Marker" style="height: ${height}px; width: ${width}px; top: ${top}px; left: ${left}px"`
+  //       )
+  //     }
+  //   }
+  // }
+  // state.$LayerMarker.innerHTML = html.join('')
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerScreenReader.js

@@ -0,0 +1,45 @@
+/* number of lines in the textarea read by screen-reader, same as vscode */
+const A11Y_PAGE_SIZE = 10
+
+const countChars = (lines) => {
+  let total = 0
+  for (const line of lines) {
+    total += line.length + 1
+  }
+  return total
+}
+
+const getScreenReaderInfo = (state) => {
+  const rowIndex = state.cursor.rowIndex
+  const columnIndex = state.cursor.columnIndex
+  const lines = state.textDocument.lines
+  const delta = rowIndex % A11Y_PAGE_SIZE
+  const linesBefore = lines.slice(rowIndex - delta, rowIndex)
+  // TODO lines[rowIndex] should always be defined
+  let line = lines[rowIndex] || ''
+  if (columnIndex > line.length) {
+    line += ' '.repeat(columnIndex - line.length)
+  }
+  const linesAfter = lines.slice(
+    rowIndex + 1,
+    rowIndex - delta + A11Y_PAGE_SIZE
+  )
+  const selection = countChars(linesBefore) + columnIndex
+  return {
+    text: [...linesBefore, line, ...linesAfter].join('\n'),
+    selectionStart: selection,
+    selectionEnd: selection,
+  }
+}
+
+// TODO this slows down rendering ~50% (extra style recalc & extra layout)
+// TODO try to avoid extra style recalc & extra layout
+// TODO possible have option to disable a11y rendering for better performance (however a11y should be enabled by default)
+export const render = (state) => {
+  const screenReaderInfo = getScreenReaderInfo(state)
+  state.$EditorInput.value = screenReaderInfo.text
+  state.$EditorInput.setSelectionRange(
+    screenReaderInfo.selectionStart,
+    screenReaderInfo.selectionEnd
+  )
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerScrollBar.js

@@ -0,0 +1,95 @@
+export const setPosition = (state, scrollBarY, scrollBarHeight) => {
+  state.$ScrollBarThumb.style.top = `${scrollBarY}px`
+  state.$ScrollBarThumb.style.height = `${scrollBarHeight}px`
+}
+
+// TODO scrollbar decorations should be own layer maybe
+const create$ScrollBarDiagnostic = () => {
+  const $ScrollBarDiagnostic = document.createElement('div')
+  $ScrollBarDiagnostic.className = 'ScrollBarDiagnostic'
+  return $ScrollBarDiagnostic
+}
+
+const render$ScrollBarDiagnostic = (
+  $ScrollBarDiagnostic,
+  scrollBarDiagnostic
+) => {
+  $ScrollBarDiagnostic.style.top = `${scrollBarDiagnostic.top}px`
+}
+
+const render$ScrollBarDiagnosticsLess = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  for (let i = 0; i < $ScrollBarDiagnostics.children.length; i++) {
+    render$ScrollBarDiagnostic(
+      $ScrollBarDiagnostics.children[i],
+      scrollBarDiagnostics[i]
+    )
+  }
+  const fragment = document.createDocumentFragment()
+  for (
+    let i = $ScrollBarDiagnostics.children.length;
+    i < scrollBarDiagnostics.length;
+    i++
+  ) {
+    const $ScrollBarDiagnostic = create$ScrollBarDiagnostic()
+    render$ScrollBarDiagnostic($ScrollBarDiagnostic, scrollBarDiagnostics[i])
+    fragment.append($ScrollBarDiagnostic)
+  }
+  $ScrollBarDiagnostics.append(fragment)
+}
+
+const render$ScrollBarDiagnosticsEqual = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  for (let i = 0; i < scrollBarDiagnostics.length; i++) {
+    render$ScrollBarDiagnostic(
+      $ScrollBarDiagnostics.children[i],
+      scrollBarDiagnostics[i]
+    )
+  }
+}
+
+const render$ScrollBarDiagnosticsMore = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  for (let i = 0; i < scrollBarDiagnostics.length; i++) {
+    render$ScrollBarDiagnostic(
+      $ScrollBarDiagnostics.children[i],
+      scrollBarDiagnostics[i]
+    )
+  }
+  const diff =
+    $ScrollBarDiagnostics.children.length - scrollBarDiagnostics.length
+  for (let i = 0; i < diff; i++) {
+    $ScrollBarDiagnostics.lastChild.remove()
+  }
+}
+
+const render$ScrollBarDiagnostics = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  if ($ScrollBarDiagnostics.children.length < scrollBarDiagnostics.length) {
+    render$ScrollBarDiagnosticsLess($ScrollBarDiagnostics, scrollBarDiagnostics)
+  } else if (
+    $ScrollBarDiagnostics.children.length === scrollBarDiagnostics.length
+  ) {
+    render$ScrollBarDiagnosticsEqual(
+      $ScrollBarDiagnostics,
+      scrollBarDiagnostics
+    )
+  } else {
+    render$ScrollBarDiagnosticsMore($ScrollBarDiagnostics, scrollBarDiagnostics)
+  }
+}
+
+export const setDiagnostics = (editor, scrollBarDiagnostics) => {
+  render$ScrollBarDiagnostics(
+    editor.$ScrollBarDiagnostics,
+    scrollBarDiagnostics
+  )
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerSelections.js

@@ -0,0 +1,70 @@
+import * as Platform from '../Platform/Platform.js'
+
+const create$Selection = () => {
+  const $Selection = document.createElement('div')
+  $Selection.className = 'EditorSelection'
+  return $Selection
+}
+
+const render$Selection = ($Selection, selection) => {
+  // TODO have many decorations per row
+  // no absolute positioning
+  $Selection.style.top = `${selection.top}px`
+  $Selection.style.left = `${selection.left}px`
+  $Selection.style.width = `${selection.width}px`
+  $Selection.style.height = `${selection.height}px`
+}
+
+const render$SelectionsLess = ($Selections, selections) => {
+  for (let i = 0; i < $Selections.children.length; i++) {
+    render$Selection($Selections.children[i], selections[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (let i = $Selections.children.length; i < selections.length; i++) {
+    const $Selection = create$Selection()
+    render$Selection($Selection, selections[i])
+    fragment.append($Selection)
+  }
+  $Selections.append(fragment)
+}
+
+const render$SelectionsEqual = ($Selections, selections) => {
+  for (let i = 0; i < selections.length; i++) {
+    render$Selection($Selections.children[i], selections[i])
+  }
+}
+
+const render$SelectionsMore = ($Selections, selections) => {
+  for (let i = 0; i < selections.length; i++) {
+    render$Selection($Selections.children[i], selections[i])
+  }
+  const diff = $Selections.children.length - selections.length
+  for (let i = 0; i < diff; i++) {
+    $Selections.lastChild.remove()
+  }
+}
+
+const render$Selections = ($Selections, selections) => {
+  if ($Selections.children.length < selections.length) {
+    render$SelectionsLess($Selections, selections)
+  } else if ($Selections.children.length === selections.length) {
+    render$SelectionsEqual($Selections, selections)
+  } else {
+    render$SelectionsMore($Selections, selections)
+  }
+}
+
+const renderSelectionsNative = (state, selections) => {
+  if (selections.length > 1) {
+    console.warn('[editor] cannot render more than one native selection')
+
+  }
+}
+
+export const setSelections = (state, selections) => {
+  if (Platform.isMobileOrTablet()) {
+    renderSelectionsNative(state, selections)
+    return
+  }
+  render$Selections(state.$LayerSelections, selections)
+}

package/static/1914fad/packages/renderer-process/src/parts/Editor/LayerText.js

@@ -0,0 +1,120 @@
+import * as Assert from '../Assert/Assert.js'
+
+const create$Row = () => {
+  const $Row = document.createElement('div')
+  $Row.className = 'EditorRow'
+  return $Row
+}
+
+const create$Token = () => {
+  const $Token = document.createElement('span')
+  $Token.className = 'Token'
+  return $Token
+}
+
+// TODO maybe use createTextNode (codeMirror uses that)
+// This function seems to be a hot spot
+const render$Token = ($Token, text, className) => {
+  $Token.className = className
+  if ($Token.firstChild) {
+    // recycle text node
+    $Token.firstChild.nodeValue = text
+  } else {
+    $Token.textContent = text
+  }
+}
+
+const render$LineLess = ($Line, lineInfo) => {
+  let i = 0
+  while (i < $Line.children.length * 2) {
+    const text = lineInfo[i++]
+    const className = lineInfo[i++]
+    render$Token($Line.children[i / 2 - 1], text, className)
+  }
+  const fragment = document.createDocumentFragment()
+  while (i < lineInfo.length) {
+    const text = lineInfo[i++]
+    const className = lineInfo[i++]
+    const $Token = create$Token()
+    render$Token($Token, text, className)
+    fragment.append($Token)
+  }
+  $Line.append(fragment)
+}
+
+const render$LineEqual = ($Line, lineInfo) => {
+  let i = 0
+  while (i < lineInfo.length) {
+    const text = lineInfo[i++]
+    const className = lineInfo[i++]
+    render$Token($Line.children[i / 2 - 1], text, className)
+  }
+}
+
+const render$LineMore = ($Line, lineInfo) => {
+  let i = 0
+  while (i < lineInfo.length) {
+    const text = lineInfo[i++]
+    const className = lineInfo[i++]
+    render$Token($Line.children[i / 2 - 1], text, className)
+  }
+  const diff = $Line.children.length - lineInfo.length / 2
+  for (let i = lineInfo.length; i < lineInfo.length + diff; i++) {
+    $Line.lastChild.remove()
+  }
+}
+
+const render$Line = ($Line, lineInfo) => {
+  if ($Line.children.length < lineInfo.length / 2) {
+    render$LineLess($Line, lineInfo)
+  } else if ($Line.children.length === lineInfo.length / 2) {
+    render$LineEqual($Line, lineInfo)
+  } else {
+    render$LineMore($Line, lineInfo)
+  }
+}
+
+const render$LinesLess = ($Lines, lineInfos) => {
+  for (let i = 0; i < $Lines.children.length; i++) {
+    render$Line($Lines.children[i], lineInfos[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (let i = $Lines.children.length; i < lineInfos.length; i++) {
+    const $Line = create$Row()
+    render$Line($Line, lineInfos[i])
+    fragment.append($Line)
+  }
+  $Lines.append(fragment)
+}
+
+const render$LinesEqual = ($Lines, lineInfos) => {
+  for (let i = 0; i < lineInfos.length; i++) {
+    render$Line($Lines.children[i], lineInfos[i])
+  }
+}
+
+const render$LinesMore = ($Lines, lineInfos) => {
+  for (let i = 0; i < lineInfos.length; i++) {
+    render$Line($Lines.children[i], lineInfos[i])
+  }
+  const diff = $Lines.children.length - lineInfos.length
+  for (let i = lineInfos.length; i < lineInfos.length + diff; i++) {
+    $Lines.lastChild.remove()
+  }
+}
+
+const render$Lines = ($Lines, lineInfos) => {
+  Assert.object($Lines)
+  Assert.array(lineInfos)
+  if ($Lines.children.length < lineInfos.length) {
+    render$LinesLess($Lines, lineInfos)
+  } else if ($Lines.children.length === lineInfos.length) {
+    render$LinesEqual($Lines, lineInfos)
+  } else {
+    render$LinesMore($Lines, lineInfos)
+  }
+}
+
+export const setLineInfos = (state, lineInfos) => {
+  render$Lines(state.$LayerText, lineInfos)
+}

package/static/1914fad/packages/renderer-process/src/parts/EditorController/EditorController.js

@@ -0,0 +1,18 @@
+import * as EditorHelper from '../Editor/EditorHelper.js'
+import * as Editor from '../Editor/Editor.js'
+import * as ActiveViewlet from '../Viewlet/ActiveViewlet.js'
+
+export const wrapEditorCommand = (fn) => {
+  const wrappedCommand = (id, ...args) => {
+    const state = ActiveViewlet.getState('EditorText')
+    console.assert(state)
+    fn(state, ...args)
+  }
+  return wrappedCommand
+}
+
+export const create = (id) => {
+  const editor = Editor.create()
+  EditorHelper.setState(id, editor)
+  return editor.$Editor
+}

package/static/1914fad/packages/renderer-process/src/parts/EditorError/EditorError.ipc.js

@@ -0,0 +1,6 @@
+import * as Command from '../Command/Command.js'
+import * as EditorError from './EditorError.js'
+
+export const __initialize__ = () => {
+  Command.register(3700, EditorError.create)
+}

package/static/1914fad/packages/renderer-process/src/parts/EditorError/EditorError.js

@@ -0,0 +1,28 @@
+import * as AriaAlert from '../AriaAlert/AriaAlert.js'
+import * as Widget from '../Widget/Widget.js'
+
+// TODO not sure whether created dom node
+// should stay in state or be removed
+// one option would result in less memory usage
+// the other option would result in less garbage collection
+
+// probably should optimize for less memory usage by default
+// unless the element is very likely to be used again soon (<30s)
+// but that's difficult to know
+
+// TODO hide widget after timeout or mousemove
+export const create = (message, x, y) => {
+  const $EditorError = document.createElement('div')
+  $EditorError.className = 'EditorWidgetError'
+  $EditorError.textContent = message
+  $EditorError.style.left = `${x}px`
+  $EditorError.style.top = `${y}px`
+  AriaAlert.alert(message)
+  Widget.append($EditorError)
+
+  return {
+    $EditorError,
+  }
+}
+
+export const dispose = (state) => {}