@lvce-editor/server 0.5.0 → 0.6.0

package/static/{4d80653/packages/renderer-process/src/parts/Editor/Editor.js → fbac85f/packages/renderer-process/src/parts/Editor/EditorEvents.js}

@@ -1,40 +1,32 @@
 // TODO so many things in this file
 
-import * as Assert from '../Assert/Assert.js'
 import * as Focus from '../Focus/Focus.js'
+import * as InputEventType from '../InputEventType/InputEventType.js'
+import * as MenuEntryId from '../MenuEntryId/MenuEntryId.js'
 import * as ModifierKey from '../ModifierKey/ModifierKey.js'
 import * as MouseEventType from '../MouseEventType/MouseEventType.js'
-import * as Platform from '../Platform/Platform.js'
 import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as LayerCursor from './LayerCursor.js'
-import * as LayerDiagnostics from './LayerDiagnostics.js'
-import * as LayerScrollBar from './LayerScrollBar.js'
-import * as LayerSelections from './LayerSelections.js'
-import * as LayerText3 from './LayerText.js'
 import * as WheelEventType from '../WheelEventType/WheelEventType.js'
-import * as InputEventType from '../InputEventType/InputEventType.js'
-
 // TODO go back to edit mode after pressing escape so screenreaders can navigate https://stackoverflow.com/questions/53909477/how-to-handle-tabbing-for-accessibility-with-a-textarea-that-uses-the-tab-button
 
 // TODO tree shake out mobile support when targeting electron -> less code -> less event listeners -> less memory -> less cpu
 
-const handleContextMenu = (event) => {
+export const handleContextMenu = (event) => {
   event.preventDefault()
-  const x = event.clientX
-  const y = event.clientY
+  const { clientX, clientY } = event
   RendererWorker.send(
     /* ContextMenu.show */ 'ContextMenu.show',
-    /* x */ x,
-    /* y */ y,
-    /* id */ 'editor'
+    /* x */ clientX,
+    /* y */ clientY,
+    /* id */ MenuEntryId.Editor
   )
 }
 
-const handleFocus = (event) => {
+export const handleFocus = (event) => {
   Focus.setFocus('EditorText')
 }
 
-const handleBlur = (event) => {
+export const handleBlur = (event) => {
   // needed for save on blur
   // also needed to close completions on blur
   RendererWorker.send(/* EditorBlur.editorBlur */ 'Editor.blur')
@@ -44,7 +36,7 @@ const handleBlur = (event) => {
  *
  * @param {InputEvent} event
  */
-const handleBeforeInput = (event) => {
+export const handleBeforeInput = (event) => {
   event.preventDefault()
   switch (event.inputType) {
     case InputEventType.InsertText:
@@ -68,33 +60,33 @@ const handleBeforeInput = (event) => {
 // - codemirror 5 also draws that line
 // - vscode does not draw a line, but displays characters during composition
 
-const handleCompositionStart = (event) => {
+export const handleCompositionStart = (event) => {
   RendererWorker.send(
     /* Editor.compositionStart */ 'Editor.compositionStart',
     /* text */ event.data
   )
 }
 
-const handleCompositionUpdate = (event) => {
+export const handleCompositionUpdate = (event) => {
   RendererWorker.send(
     /* Editor.compositionUpdate */ 'Editor.compositionUpdate',
     /* text */ event.data
   )
 }
 
-const handleCompositionEnd = (event) => {
+export const handleCompositionEnd = (event) => {
   RendererWorker.send(
     /* Editor.compositionEnd */ 'Editor.compositionEnd',
     /* text */ event.data
   )
 }
 
-const handleCut = (event) => {
+export const handleCut = (event) => {
   event.preventDefault()
   RendererWorker.send(/* Editor.cut */ 'Editor.cut')
 }
 
-const handleSelectionMove = (event) => {
+export const handleSelectionMove = (event) => {
   const x = event.clientX
   const y = event.clientY
   const totalOffset = getTotalOffset(event)
@@ -115,7 +107,7 @@ const handleSelectionMove = (event) => {
   }
 }
 
-const handleSelectionDone = (event) => {
+export const handleSelectionDone = (event) => {
   document.removeEventListener('mousemove', handleSelectionMove)
   document.removeEventListener('mouseup', handleSelectionDone)
 }
@@ -130,8 +122,7 @@ const getModifier = (event) => {
   return ModifierKey.None
 }
 
-const handleSingleClick = (event, x, y, offset) => {
-  console.log('click', { x, y, offset })
+export const handleSingleClick = (event, x, y, offset) => {
   const modifier = getModifier(event)
   RendererWorker.send(
     /* Editor.handleSingleClick */ 'Editor.handleSingleClick',
@@ -148,7 +139,7 @@ const handleSingleClick = (event, x, y, offset) => {
   document.addEventListener('mouseup', handleSelectionDone)
 }
 
-const handleDoubleClick = (event, x, y, offset) => {
+export const handleDoubleClick = (event, x, y, offset) => {
   RendererWorker.send(
     /* Editor.handleDoubleClick */ 'Editor.handleDoubleClick',
     /* x */ x,
@@ -157,7 +148,7 @@ const handleDoubleClick = (event, x, y, offset) => {
   )
 }
 
-const handleTripleClick = (event, x, y, offset) => {
+export const handleTripleClick = (event, x, y, offset) => {
   RendererWorker.send(
     /* Editor.handleTripleClick */ 'Editor.handleTripleClick',
     /* x */ x,
@@ -211,7 +202,7 @@ const getTotalOffset = (event) => {
   throw new Error('caret position is not supported')
 }
 
-const handleMouseDown = (event) => {
+export const handleMouseDown = (event) => {
   if (isRightClick(event)) {
     return
   }
@@ -219,7 +210,6 @@ const handleMouseDown = (event) => {
   const totalOffset = getTotalOffset(event)
   const x = event.clientX
   const y = event.clientY
-  console.log('detail', event.detail)
   switch (event.detail) {
     case 1:
       handleSingleClick(event, x, y, totalOffset)
@@ -240,7 +230,7 @@ const handleMouseDown = (event) => {
 
 // disabled for now because of constant cpu usage on mousemove
 // bad for performance
-const handleMouseMove = (event) => {
+export const handlePointerMove = (event) => {
   const x = event.clientX
   const y = event.clientY
   if (event.altKey) {
@@ -260,21 +250,22 @@ const handleMouseMove = (event) => {
  *
  * @param {WheelEvent} event
  */
-const handleWheel = (event) => {
+export const handleWheel = (event) => {
+  const { deltaMode, deltaY } = event
   // event.preventDefault()
   // const state = EditorHelper.getStateFromEvent(event)
   // TODO send editor id
-  switch (event.deltaMode) {
+  switch (deltaMode) {
     case WheelEventType.DomDeltaLine:
       RendererWorker.send(
         /* Editor.setDeltaY */ 'Editor.setDeltaY',
-        /* value */ event.deltaY
+        /* value */ deltaY
       )
       break
     case WheelEventType.DomDeltaPixel:
       RendererWorker.send(
         /* Editor.setDeltaY */ 'Editor.setDeltaY',
-        /* value */ event.deltaY
+        /* value */ deltaY
       )
       break
     default:
@@ -282,31 +273,38 @@ const handleWheel = (event) => {
   }
 }
 
-const handlePaste = (event) => {
+export const handlePaste = (event) => {
   event.preventDefault()
   const text = event.clipboardData.getData('text')
   RendererWorker.send(/* Editor.paste */ 'Editor.paste', /* text */ text)
 }
 
-const handleScrollBarThumbMouseMove = (event) => {
-  const y = event.clientY
+export const handleScrollBarThumbPointerMove = (event) => {
+  const { clientY } = event
   RendererWorker.send(
     /* Editor.handleScrollBarMouseMove */ 'Editor.handleScrollBarMove',
-    /* y */ y
+    /* y */ clientY
   )
 }
 
-const handleScrollBarThumbMouseUp = () => {
-  window.removeEventListener('mousemove', handleScrollBarThumbMouseMove)
-  window.removeEventListener('mouseup', handleScrollBarThumbMouseUp)
+export const handleScrollBarThumbPointerUp = (event) => {
+  const { target, pointerId } = event
+  target.releasePointerCapture(pointerId)
+  target.removeEventListener('pointermove', handleScrollBarThumbPointerMove)
+  target.removeEventListener('pointerup', handleScrollBarThumbPointerUp)
 }
 
-const handleScrollBarThumbMouseDown = (event) => {
-  window.addEventListener('mousemove', handleScrollBarThumbMouseMove)
-  window.addEventListener('mouseup', handleScrollBarThumbMouseUp)
+export const handleScrollBarThumbPointerDown = (event) => {
+  const { target, pointerId } = event
+  target.setPointerCapture(pointerId)
+  target.addEventListener('pointermove', handleScrollBarThumbPointerMove, {
+    passive: false,
+  })
+  target.addEventListener('pointerup', handleScrollBarThumbPointerUp)
 }
 
-const handleScrollBarMouseDown = (event) => {
+export const handleScrollBarMouseDown = (event) => {
+  event.preventDefault()
   const y = event.clientY
   RendererWorker.send(
     /* EditorHandleScrollBarClick.editorHandleScrollBarClick */ 'Editor.handleScrollBarClick',
@@ -314,6 +312,11 @@ const handleScrollBarMouseDown = (event) => {
   )
 }
 
+export const handleScrollBarContextMenu = (event) => {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
 const toSimpleTouch = (touch) => {
   return {
     x: touch.clientX,
@@ -334,7 +337,7 @@ const toSimpleTouchEvent = (event) => {
 
 // TODO use touch events for scrolling
 
-const handleTouchStart = (event) => {
+export const handleTouchStart = (event) => {
   const touchEvent = toSimpleTouchEvent(event)
   RendererWorker.send(
     /* EditorHandleTouchStart.editorHandleTouchStart */ 'Editor.handleTouchStart',
@@ -342,7 +345,7 @@ const handleTouchStart = (event) => {
   )
 }
 
-const handleTouchMove = (event) => {
+export const handleTouchMove = (event) => {
   const touchEvent = toSimpleTouchEvent(event)
   RendererWorker.send(
     /* EditorHandleTouchMove.editorHandleTouchMove */ 'Editor.handleTouchMove',
@@ -350,7 +353,7 @@ const handleTouchMove = (event) => {
   )
 }
 
-const handleTouchEnd = (event) => {
+export const handleTouchEnd = (event) => {
   if (event.cancelable) {
     event.preventDefault()
   }
@@ -408,7 +411,7 @@ const getRangeFromSelection = (selection) => {
   }
 }
 
-const handleContentEditableBeforeInput = (event) => {
+export const handleContentEditableBeforeInput = (event) => {
   const selection = document.getSelection()
   const range = getRangeFromSelection(selection)
   if (!range) {
@@ -422,7 +425,7 @@ const handleContentEditableBeforeInput = (event) => {
   )
 }
 
-const handleNativeSelectionChange = (event) => {
+export const handleNativeSelectionChange = (event) => {
   // if (state.shouldIgnoreSelectionChange) {
   //   state.shouldIgnoreSelectionChange = false
   //   return
@@ -437,196 +440,3 @@ const handleNativeSelectionChange = (event) => {
   //   /* range */ range
   // )
 }
-
-// TODO all create functions should have no arguments
-// and be split into two parts
-// 1. create -> only create dom elements
-// 2. render -> fill elements with attributes and data
-// that way all dom nodes can be recycled
-export const create = () => {
-  const $EditorInput = document.createElement('textarea')
-  $EditorInput.className = 'EditorInput'
-  $EditorInput.ariaAutoComplete = 'list'
-  $EditorInput.ariaRoleDescription = 'editor'
-  $EditorInput.ariaMultiLine = 'true'
-  $EditorInput.setAttribute('autocomplete', 'off')
-  $EditorInput.setAttribute('autocapitalize', 'off')
-  $EditorInput.setAttribute('autocorrect', 'off')
-  $EditorInput.setAttribute('wrap', 'off')
-  $EditorInput.setAttribute('spellcheck', 'false')
-  // @ts-ignore
-  $EditorInput.role = 'textbox'
-  $EditorInput.onpaste = handlePaste
-  // TODO where to best put listeners (side effects)
-  $EditorInput.addEventListener('beforeinput', handleBeforeInput)
-  $EditorInput.addEventListener('compositionstart', handleCompositionStart)
-  $EditorInput.addEventListener('compositionupdate', handleCompositionUpdate)
-  $EditorInput.addEventListener('compositionend', handleCompositionEnd)
-  $EditorInput.onfocus = handleFocus
-  $EditorInput.onblur = handleBlur
-  $EditorInput.oncut = handleCut
-
-  const $LayerCursor = document.createElement('div')
-  $LayerCursor.className = 'LayerCursor'
-
-  const $LayerText = document.createElement('div')
-  $LayerText.className = 'EditorRows'
-
-  $LayerText.addEventListener('mousedown', handleMouseDown)
-
-  const $ScrollBarThumb = document.createElement('div')
-  $ScrollBarThumb.className = 'ScrollBarThumb'
-  $ScrollBarThumb.addEventListener('mousedown', handleScrollBarThumbMouseDown)
-
-  // TODO only create $ScrollBarDiagnostics lazily when there are actually diagnostics
-  const $ScrollBarDiagnostics = document.createElement('div')
-  $ScrollBarDiagnostics.className = 'EditorScrollBarDiagnostics'
-
-  const $ScrollBar = document.createElement('div')
-  $ScrollBar.className = 'ScrollBar'
-  $ScrollBar.onmousedown = handleScrollBarMouseDown
-  $ScrollBar.append($ScrollBarThumb)
-
-  // $EditorRows.addEventListener('mousemove', handleMouseMove, { passive: true })
-
-  // TODO function should be hoisted (maybe -> one listener for all editors (definitely))
-  // only problem is $EditorInput closure
-
-  // TODO when mousedown on completions -> this shouldn't be called
-
-  const $LayerSelections = document.createElement('div')
-  $LayerSelections.className = 'Selections'
-
-  // TODO maybe use css grid to position layers on top of each other
-  // TODO maybe merge layerDiagnostics with LayerSelections
-  // TODO maybe this should be more generic, e.g. LayerDecorations
-  // where decoration = {top,left, width, height, type/className}
-  const $LayerDiagnostics = document.createElement('div')
-  $LayerDiagnostics.className = 'LayerDiagnostics'
-
-  const $EditorLayers = document.createElement('div')
-  $EditorLayers.className = 'EditorLayers'
-  $EditorLayers.append(
-    $LayerSelections,
-    $LayerText,
-    $LayerCursor,
-    $LayerDiagnostics
-  )
-
-  const $Editor = document.createElement('div')
-  $Editor.className = 'Viewlet Editor'
-  $Editor.dataset.viewletId = 'EditorText'
-  // @ts-ignore
-  $Editor.role = 'code'
-  $Editor.append($EditorInput, $EditorLayers, $ScrollBarDiagnostics, $ScrollBar)
-  $Editor.addEventListener('contextmenu', handleContextMenu)
-  $Editor.addEventListener('wheel', handleWheel, { passive: true })
-  $Editor.addEventListener('mousemove', handleMouseMove, { passive: true })
-  return {
-    $LayerCursor,
-    $LayerSelections,
-    $LayerText,
-    $EditorLayers,
-    $Editor,
-    $EditorInput,
-    $ScrollBarThumb,
-    $LayerDiagnostics,
-    $ScrollBarDiagnostics,
-    shouldIgnoreSelectionChange: false,
-    $Viewlet: $Editor,
-  }
-}
-
-export const setText = (state, textInfos) => {
-  LayerText3.setLineInfos(state, textInfos)
-}
-
-export const setSettings = (state, fontSize, lineHeight, letterSpacing) => {
-  // TODO many properties on <html> element in chrome devtools looks ugly
-  // maybe put styles into a stylesheet instead of using inline styles?
-  const root = document.documentElement
-  root.style.setProperty('--EditorFontSize', `${fontSize}px`)
-  root.style.setProperty('--EditorLineHeight', `${lineHeight}px`)
-  root.style.setProperty('--EditorLetterSpacing', letterSpacing)
-}
-
-export const setScrollBar = (state, scrollBarY, scrollBarHeight) => {
-  LayerScrollBar.setPosition(state, scrollBarY, scrollBarHeight)
-}
-
-export const renderCursors = (state, cursorInfos) => {
-  LayerCursor.setCursors(state, cursorInfos)
-}
-
-export const renderSelections = (state, selectionInfos) => {
-  LayerSelections.setSelections(state, selectionInfos)
-}
-
-export const renderTextAndCursors = (state, textInfos, cursorInfos) => {
-  LayerText3.setLineInfos(state, textInfos)
-  LayerCursor.setCursors(state, cursorInfos)
-}
-
-export const setSelections = (state, cursorInfos, selectionInfos) => {
-  LayerCursor.setCursors(state, cursorInfos)
-  LayerSelections.setSelections(state, selectionInfos)
-}
-
-export const renderTextAndCursorsAndSelections = (
-  state,
-  scrollBarY,
-  scrollBarHeight,
-  textInfos,
-  cursorInfos,
-  selectionInfos
-) => {
-  Assert.object(state)
-  Assert.number(scrollBarY)
-  Assert.number(scrollBarHeight)
-  Assert.array(textInfos)
-  Assert.array(cursorInfos)
-  Assert.array(selectionInfos)
-  LayerScrollBar.setPosition(state, scrollBarY, scrollBarHeight)
-  LayerText3.setLineInfos(state, textInfos)
-  LayerCursor.setCursors(state, cursorInfos)
-  LayerSelections.setSelections(state, selectionInfos)
-}
-
-// TODO this should be in editor
-const getColumnWidth = () => {
-  const testSpan = document.createElement('span')
-  testSpan.textContent = 'a'
-  testSpan.style.fontSize = '15px'
-  testSpan.style.letterSpacing = '0.5px'
-  testSpan.style.position = 'fixed'
-  testSpan.style.fontFamily = "'Fira Code'"
-  document.body.append(testSpan)
-  const result = Number.parseFloat(getComputedStyle(testSpan).width) / 1
-  testSpan.remove()
-  return result
-}
-
-export const mount = (state, $Parent) => {
-  $Parent.append(state.$Editor)
-}
-
-export const dispose = (state) => {}
-
-export const focus = (state) => {
-  const { $EditorInput } = state
-  if (!$EditorInput.isConnected) {
-    console.warn('unmounted editor cannot be focused')
-  }
-  $EditorInput.focus()
-}
-
-export const setLanguageId = async (state, languageId) => {
-  // state.languageId = languageId
-  // state.$Editor.dataset.languageId = languageId
-  // loadTokenizer(languageId)
-}
-
-export const renderDiagnostics = (state, diagnostics, scrollBarDiagnostics) => {
-  LayerDiagnostics.setDiagnostics(state, diagnostics)
-  LayerScrollBar.setDiagnostics(state, scrollBarDiagnostics)
-}

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/Editor/LayerCursor.js

@@ -119,6 +119,5 @@ const renderCursorsNative = (state, cursors) => {
 }
 
 export const setCursors = (state, cursors) => {
-  console.log({ cursors })
   render$Cursors(state.$LayerCursor, state.$LayerText, cursors)
 }

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ElementTagMap/ElementTagMap.js

@@ -21,6 +21,8 @@ export const getElementTag = (type) => {
       return ElementTag.THead
     case VirtualDomElements.Tr:
       return ElementTag.Tr
+    case VirtualDomElements.Input:
+      return ElementTag.Input
     default:
       throw new Error(`element tag not found ${type}`)
   }

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/ElementTags/ElementTags.js

@@ -7,3 +7,4 @@ export const THead = 'thead'
 export const Td = 'td'
 export const Th = 'th'
 export const Tr = 'tr'
+export const Input = 'input'

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/IpcParent/IpcParent.js

@@ -1,8 +1,3 @@
-// TODO lazyload these files
-import * as IpcParentWithMessagePort from './IpcParentWithMessagePort.js'
-import * as IpcParentWithModuleWorker from './IpcParentWithModuleWorker.js'
-import * as IpcParentWithReferencePort from './IpcParentWithReferencePort.js'
-
 /* istanbul ignore file */
 
 export const Methods = {
@@ -16,15 +11,21 @@ export const Methods = {
  */
 const METHOD_PREFERRED = Methods.ModuleWorker
 
-export const create = async ({ method, ...options }) => {
+const getModule = () => {
   switch (METHOD_PREFERRED) {
     case Methods.ModuleWorker:
-      return IpcParentWithModuleWorker.create(options)
+      return import('./IpcParentWithModuleWorker.js')
     case Methods.MessagePort:
-      return IpcParentWithMessagePort.create(options)
+      return import('./IpcParentWithMessagePort.js')
     case Methods.ReferencePort:
-      return IpcParentWithReferencePort.create(options)
+      return import('./IpcParentWithReferencePort.js')
     default:
       throw new Error('unknown method')
   }
 }
+
+export const create = async ({ method, ...options }) => {
+  const module = await getModule()
+  // @ts-ignore
+  return module.create(options)
+}

package/static/{4d80653 → fbac85f}/packages/renderer-process/src/parts/KeyBindings/KeyBindings.js

@@ -104,6 +104,7 @@ const handleMatchingKeyBinding = (matchingKeyBinding) => {
 const handleKeyDown = (event) => {
   const identifier = getIdentifier(event)
   const matchingKeyBinding = getMatchingKeyBinding(identifier)
+  console.log({ identifier, matchingKeyBinding })
   if (!matchingKeyBinding) {
     return
   }