Format

src/elements/drag-area.ts

@@ -1,7 +1,7 @@
-import { css, CSSResult, html, LitElement, type TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import { cssReset } from '../utils/css-reset.js'
-import { DragLine } from './drag-line.js'
+import {css, CSSResult, html, LitElement, type TemplateResult} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {cssReset} from '../utils/css-reset.js'
+import {DragLine} from './drag-line.js'
 
 declare global {
   interface HTMLElementEventMap {
@@ -39,17 +39,17 @@ export class DragArea extends LitElement {
 
   #gesture:
     | {
-      /** Set on significant duration or movement. */
-      drag?: true
-      /** Most recent event intercepted. */
-      ev: PointerEvent
-      /** Origin of the opening pointer down event. */
-      readonly start: Readonly<{ x: number; y: number }>
-      /** Re-target all drag events in the gesture. */
-      readonly target: HTMLElement
-      /** Synthetic drag event interval timer. */
-      readonly timer: ReturnType<typeof setInterval>
-    }
+        /** Set on significant duration or movement. */
+        drag?: true
+        /** Most recent event intercepted. */
+        ev: PointerEvent
+        /** Origin of the opening pointer down event. */
+        readonly start: Readonly<{x: number; y: number}>
+        /** Re-target all drag events in the gesture. */
+        readonly target: HTMLElement
+        /** Synthetic drag event interval timer. */
+        readonly timer: ReturnType<typeof setInterval>
+      }
     | undefined
 
   // to-do:  Disable mobile long press?
@@ -74,17 +74,17 @@ export class DragArea extends LitElement {
   #onPointerDown = (ev: PointerEvent): void => {
     if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey) return
     if (!ev.isPrimary || ev.buttons !== 1) return
-    if (!ev.composedPath().some((target) => target instanceof DragLine)) return
+    if (!ev.composedPath().some(target => target instanceof DragLine)) return
     const target = ev.composedPath()[0]
     if (!(target instanceof HTMLElement)) return
     if (target.isContentEditable && target.matches(':focus')) return // Editing text.
 
     ev.preventDefault()
     this.#gesture = {
       ev,
-      start: { x: ev.clientX, y: ev.clientY },
+      start: {x: ev.clientX, y: ev.clientY},
       target,
-      timer: setInterval(() => this.#onPointerMove(this.#gesture!.ev), 10),
+      timer: setInterval(() => this.#onPointerMove(this.#gesture!.ev), 10)
     }
   }
 

src/elements/drag-line.ts

@@ -1,18 +1,18 @@
-import { css, CSSResult, html, LitElement, type TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import type { Group, Line, PositionLine } from '../tree/text-tree.js'
-import { Bubble } from '../utils/bubble.js'
-import { cssReset } from '../utils/css-reset.js'
+import {css, CSSResult, html, LitElement, type TemplateResult} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import type {Group, Line, PositionLine} from '../tree/text-tree.js'
+import {Bubble} from '../utils/bubble.js'
+import {cssReset} from '../utils/css-reset.js'
 import {
   blurActiveElement,
   composedAncestorElement,
   composedClosest,
   composedClosestScrollable,
   composedElementFromPoint,
-  scrollTowardsEdge,
+  scrollTowardsEdge
 } from '../utils/element-util.js'
-import type { LineElement } from './line-element.js'
-import { LineList } from './line-list.js'
+import type {LineElement} from './line-element.js'
+import {LineList} from './line-list.js'
 
 export type DragEnd = {
   readonly from: Readonly<Line>
@@ -53,14 +53,14 @@ export class DragLine extends LitElement {
 
   #drag:
     | {
-      /** Cursor position relative this. */
-      readonly cursor: Readonly<{ x: number; y: number }>
-      /** A clone of this modified to follow the cursor. */
-      readonly ghost: DragLine
-      readonly line: Readonly<Line>
-      over?: { at: PositionLine; line: Readonly<Line> }
-      parent: Element
-    }
+        /** Cursor position relative this. */
+        readonly cursor: Readonly<{x: number; y: number}>
+        /** A clone of this modified to follow the cursor. */
+        readonly ghost: DragLine
+        readonly line: Readonly<Line>
+        over?: {at: PositionLine; line: Readonly<Line>}
+        parent: Element
+      }
     | undefined
 
   constructor() {
@@ -87,20 +87,18 @@ export class DragLine extends LitElement {
         Bubble<DragEnd>('drag-line-end', {
           from: this.#drag.line,
           to: this.#drag.over.line,
-          at: this.#drag.over.at,
-        }),
+          at: this.#drag.over.at
+        })
       )
       // Lit components track children rendered from the model. Manually adding
       // or removing a child may cause a duplicate or missing child on model
       // update. Unconditionally remove the drag element and invalidate both
       // parent lists it was associated with.
 
       this.#drag.parent.dispatchEvent(
-        Bubble<undefined>('drag-line-invalidate', undefined),
-      )
-      this.dispatchEvent(
-        Bubble<undefined>('drag-line-invalidate', undefined),
+        Bubble<undefined>('drag-line-invalidate', undefined)
       )
+      this.dispatchEvent(Bubble<undefined>('drag-line-invalidate', undefined))
       this.remove()
       this.#drag = undefined
     }
@@ -116,19 +114,18 @@ export class DragLine extends LitElement {
     this.#moveGhostToCursor(scrollable, ev)
 
     if (scrollable) {
-      scrollTowardsEdge(scrollable, { x: ev.clientX, y: ev.clientY }, 32, 4)
+      scrollTowardsEdge(scrollable, {x: ev.clientX, y: ev.clientY}, 32, 4)
     }
 
     const el = composedElementFromPoint(ev.pageX, ev.pageY)
     if (!el) return
 
-    const over = <DragLine | LineList | undefined> (
+    const over = <DragLine | LineList | undefined>(
       composedClosest('drag-line, line-list', el)
     )
     if (!over) return
-    const overLine = over instanceof DragLine
-      ? queryLineElement(over)?.line
-      : undefined // to-do: fix for list
+    const overLine =
+      over instanceof DragLine ? queryLineElement(over)?.line : undefined // to-do: fix for list
     if (!overLine) return
 
     let op = computeDragOp(ev, this, over)
@@ -157,7 +154,7 @@ export class DragLine extends LitElement {
         op satisfies 'none'
         return
     }
-    this.#drag.over = { at, line: overLine }
+    this.#drag.over = {at, line: overLine}
   }
 
   #onDragStart = (ev: DragEvent): void => {
@@ -172,18 +169,17 @@ export class DragLine extends LitElement {
     if (!parent) throw Error('missing parent')
 
     this.#drag = {
-      cursor: { x: ev.offsetX, y: ev.offsetY },
-      ghost: <DragLine> this.cloneNode(true), // Before add('picked') and follow.
+      cursor: {x: ev.offsetX, y: ev.offsetY},
+      ghost: <DragLine>this.cloneNode(true), // Before add('picked') and follow.
       line: lineEl.line,
-      parent: parent,
+      parent: parent
     }
 
     this.classList.add('picked')
     lineEl.classList.add('picked')
 
     if (this.#drag.ghost.children[0]) {
-      ;(<Element & { line: Line }> this.#drag.ghost.children[0]).line =
-        lineEl.line
+      ;(<Element & {line: Line}>this.#drag.ghost.children[0]).line = lineEl.line
       this.#drag.ghost.children[0].classList.add('ghost')
       // setTimeout(() => this.#drag.ghost.children[0].classList.add('ghost'), 10)
     }
@@ -202,15 +198,15 @@ export class DragLine extends LitElement {
       0,
       Math.min(
         scrollable.scrollLeft + ev.pageX - this.#drag.cursor.x,
-        scrollable.scrollWidth - rect.width - 1,
-      ),
+        scrollable.scrollWidth - rect.width - 1
+      )
     )
     const y = Math.max(
       0,
       Math.min(
         scrollable.scrollTop + ev.pageY - this.#drag.cursor.y,
-        scrollable.scrollHeight - rect.height - 1,
-      ),
+        scrollable.scrollHeight - rect.height - 1
+      )
     )
     this.#drag.ghost.style.translate = `${x}px ${y}px`
   }
@@ -223,7 +219,7 @@ export class DragLine extends LitElement {
 function computeDragOp(
   ev: DragEvent,
   picked: DragLine,
-  over: DragLine | LineList,
+  over: DragLine | LineList
 ): 'none' | 'after' | 'append' | 'before' | 'prepend' {
   if (over.contains(picked)) return 'none' // Pivoting over picked may oscillate.
   if (over instanceof LineList) return 'append'
@@ -232,7 +228,7 @@ function computeDragOp(
   if (!lineEl) return 'none'
 
   const rect = lineEl.rect
-  const offset = { x: ev.pageX - rect.x, y: ev.pageY - rect.y }
+  const offset = {x: ev.pageX - rect.x, y: ev.pageY - rect.y}
 
   const above = offset.y / rect.height < 0.5
   const inside = offset.x / rect.width >= 0.5
@@ -246,6 +242,5 @@ function computeDragOp(
 }
 
 function queryLineElement(el: LitElement): LineElement | undefined {
-  return <LineElement> el.renderRoot.querySelector('slot')!
-    .assignedElements()[0]
+  return <LineElement>el.renderRoot.querySelector('slot')!.assignedElements()[0]
 }

src/elements/line-element.ts

@@ -1,5 +1,5 @@
-import type { LitElement } from 'lit'
-import type { Line } from '../tree/text-tree.js'
+import type {LitElement} from 'lit'
+import type {Line} from '../tree/text-tree.js'
 
 export type LineElement = LitElement & {
   line?: Readonly<Line> | undefined

src/elements/linear-text/linear-text-vars.ts

@@ -1,4 +1,4 @@
-import { css, type CSSResult } from 'lit'
+import {css, type CSSResult} from 'lit'
 
 export const linearTextVars: CSSResult = css`
   :host {

src/io/file.ts

@@ -1,4 +1,4 @@
-import { fileOpen, fileSave } from 'browser-fs-access'
+import {fileOpen, fileSave} from 'browser-fs-access'
 
 export type FileAndHandle = {
   file: File
@@ -15,45 +15,45 @@ export async function openFile(): Promise<FileAndHandle | undefined> {
     file = await fileOpen({
       mimeTypes: [defaultMimeType],
       extensions: [...defaultExtensions],
-      description: 'Plain Text Files',
+      description: 'Plain Text Files'
     })
   } catch (err) {
     if (isCanceledByUser(err)) return
     throw err
   }
-  return { file, handle: file.handle }
+  return {file, handle: file.handle}
 }
 
 export async function reopenFile(
-  fileAndHandle: FileAndHandle,
+  fileAndHandle: FileAndHandle
 ): Promise<FileAndHandle> {
   if (!fileAndHandle.handle) return fileAndHandle
   return {
     file: await fileAndHandle.handle.getFile(),
-    handle: fileAndHandle.handle,
+    handle: fileAndHandle.handle
   }
 }
 
 export function isFileModified(
   before: Readonly<FileAndHandle>,
-  after: Readonly<FileAndHandle>,
+  after: Readonly<FileAndHandle>
 ): boolean {
   return before.file.lastModified < after.file.lastModified
 }
 
 export async function saveFile(
   fileAndHandle: FileAndHandle | undefined,
-  text: string,
+  text: string
 ): Promise<FileAndHandle | undefined> {
   let handle
   try {
     handle = await fileSave(
-      new Blob([text], { type: defaultMimeType }),
+      new Blob([text], {type: defaultMimeType}),
       {
         fileName: fileAndHandle?.file.name ?? `untitled${defaultExtension}`,
-        extensions: [...defaultExtensions],
+        extensions: [...defaultExtensions]
       },
-      fileAndHandle?.handle,
+      fileAndHandle?.handle
     )
   } catch (err) {
     if (isCanceledByUser(err)) {
@@ -63,7 +63,7 @@ export async function saveFile(
     throw err
   }
   if (!handle) return fileAndHandle
-  return { file: await handle.getFile(), handle }
+  return {file: await handle.getFile(), handle}
 }
 
 function isCanceledByUser(err: unknown): boolean {

src/io/storage.ts

@@ -1,4 +1,4 @@
-import { TextTree } from '../tree/text-tree.js'
+import {TextTree} from '../tree/text-tree.js'
 
 export type Autosave = {
   /** Filename last saved as. */
@@ -18,13 +18,13 @@ const autosave: string = 'linearText'
 export function saveStorage(
   filename: string | undefined,
   saved: boolean,
-  tree: Readonly<TextTree>,
+  tree: Readonly<TextTree>
 ): void {
   const save: Autosave = {
     filename,
     saved,
     text: TextTree.toString(tree),
-    version: 1,
+    version: 1
   }
   localStorage.setItem(autosave, JSON.stringify(save))
 }

src/manifest.json

@@ -4,21 +4,13 @@
   "display": "standalone",
   "homepage_url": "https://lineartext.com",
   "icons": [
-    { "src": "favicon/favicon.png", "sizes": "16x16", "type": "image/png" },
-    { "src": "favicon/favicon32.png", "sizes": "32x32", "type": "image/png" },
-    { "src": "favicon/favicon48.png", "sizes": "48x48", "type": "image/png" },
-    { "src": "favicon/favicon64.png", "sizes": "64x64", "type": "image/png" },
-    {
-      "src": "favicon/favicon192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "favicon/favicon512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    },
-    { "src": "favicon/favicon.svg", "sizes": "any", "type": "image/svg+xml" }
+    {"src": "favicon/favicon.png", "sizes": "16x16", "type": "image/png"},
+    {"src": "favicon/favicon32.png", "sizes": "32x32", "type": "image/png"},
+    {"src": "favicon/favicon48.png", "sizes": "48x48", "type": "image/png"},
+    {"src": "favicon/favicon64.png", "sizes": "64x64", "type": "image/png"},
+    {"src": "favicon/favicon192.png", "sizes": "192x192", "type": "image/png"},
+    {"src": "favicon/favicon512.png", "sizes": "512x512", "type": "image/png"},
+    {"src": "favicon/favicon.svg", "sizes": "any", "type": "image/svg+xml"}
   ],
   "manifest_version": 3,
   "name": "Linear Text",

src/tree/line-type.ts

@@ -2,9 +2,9 @@ import {
   isDataImageURIStr,
   isDataURIStr,
   isFileURIStr,
-  isHTTPURIStr,
+  isHTTPURIStr
 } from '../uri-parser/uri-parser.js'
-import { isNumeric } from '../utils/string-util.js'
+import {isNumeric} from '../utils/string-util.js'
 
 /** String-encoded data type of the text value. */
 export type LineType =
@@ -61,11 +61,11 @@ const imageExtensions = Object.freeze([
   '.ico',
   '.cur',
   '.tif',
-  '.tiff',
+  '.tiff'
 ])
 
 function endsWithImageExtension(text: string): boolean {
-  const extIndex = imageExtensions.find((ext) => text.endsWith(ext))
+  const extIndex = imageExtensions.find(ext => text.endsWith(ext))
   if (extIndex == null) return false
   // Require not just an extension but a filename stem too.
   return text.length > extIndex.length