Fix bugs with package management, fix pasting from Chrome, add <details> and <summary> editing

Author: salmenf

@webwriter/app-desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webwriter/app-desktop",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Windows/Mac/Linux version of WebWriter",
   "private": true,
   "author": "Frederic Salmen <frederic@fsalmen.de>",

@webwriter/app-desktop/src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "webwriter"
-version = "0.8.2"
+version = "0.8.3"
 description = "Windows/Mac/Linux version of WebWriter"
 authors = ["Frederic Salmen <frederic@fsalmen.de>"]
 license = "UNLICENSED"

@webwriter/app-desktop/src-tauri/Cargo.toml

@@ -413,5 +413,7 @@
 'spaceKey': `Leertaste`,
 'tabKey': `⭾ Tab`,
 'upKey': `↑ Hoch`,
+'s3b3ea038c5d3bb06': `Division`,
+'se6cdad455e2d8c02': `Insert a division`,
     };
 

@webwriter/core/localization/generated/de.ts

@@ -173,11 +173,19 @@ export async function search(text: string, params?: {size?: number, from?: numbe
 export async function pm(command: string, commandArgs: string[] = [], json=true, cwd?: string) {
   const cmdArgs = [command, ...(json ? ["--json"]: []), ...commandArgs]
   const opts = cwd? {cwd}: {}
+  console.info(`[TAURI] ${cwd? cwd: await appDir()}> bin/yarn ${[...cmdArgs, "--mutex file"].join(" ")}`)
   const output = await Command.sidecar("bin/yarn", [...cmdArgs, "--mutex file"], opts).execute()
   if(output.stderr) {
-    const err = output.stderr.split("\n").map((e: any) => JSON.parse(e))
-    const errors = err.filter((e: any) => e.type === "error")
-    const warnings = err.filter((e: any) => e.type === "warning")
+    const err = output.stderr.split("\n").map((e: any) => {
+      try {
+        console.error(JSON.parse(e))
+      }
+      catch(err) {
+        console.error(e)
+      }
+    })
+    const errors = err.filter((e: any) => e?.type === "error")
+    const warnings = err.filter((e: any) => e?.type === "warning")
     warnings.forEach((w: any) => console.warn(w.data))
     if(err?.some((e: any) => e?.type === "error")) {
       throw err

@webwriter/core/model/environment/tauri.ts

@@ -386,7 +386,7 @@ const PackageObjectSchema = z.object({
   imports: z.record(z.string().startsWith("#"), z.record(z.string())).optional(),
   editingConfig: EditingConfig.optional(),
   installed: z.boolean().optional().default(false),
-  outdated: z.boolean().optional().default(false),
+  latest: SemVer.schema.optional(),
   imported: z.boolean().optional().default(false),
   watching: z.boolean().optional().default(false),
   reloadCount: z.number().optional().default(0),

@webwriter/core/model/schemas/packageschema/index.ts

@@ -59,6 +59,10 @@ html::-webkit-scrollbar-button:vertical:single-button:increment:disabled {
   border-color: var(--sl-color-gray-400) transparent transparent transparent;
 }
 
+* {
+  outline: none;
+}
+
 a:not([href]) {
   text-decoration: underline;
   color: #0000EE;
@@ -145,25 +149,43 @@ figure.ProseMirror-selectednode::before {
   -webkit-user-select: none !important;
 }
 
-.ww-widget[editable]::after {
+.ProseMirror > :not(.ProseMirror-widget) {
+  position: relative;
+}
+
+.ProseMirror > :not(.ProseMirror-widget)::after {
   content: "";
   position: absolute;
-  right: -14px;
+  right: -18px;
   top: 0;
-  width: 6px;
+  border-right: 6px solid transparent;
   background: none;
   height: 100%;
-  border-radius: 4px;
+  cursor: pointer;
+  width: 20px;
 }
 
-.ww-widget[editable]:hover::after {
-  background: var(--sl-color-primary-300);
+.ProseMirror *:not([data-ww-inline]):hover {
+  outline: 1px dotted var(--sl-color-gray-400);
+  outline-offset: 2px;
+}
+/*
+.ProseMirror > *:hover::after {
+  border-color: var(--sl-color-gray-100);
 }
 
-.ww-widget[editable][data-ww-selected]::after {
-  background: var(--sl-color-primary-400);
+.ProseMirror > *:is([data-ww-selected], :has([data-ww-selected]))::after {
+  border-color: var(--sl-color-gray-200);
+}
+
+.ProseMirror > *:is([data-ww-selected]:hover, :has([data-ww-selected]:hover))::after {
+  border-color: var(--sl-color-gray-300);
 }
 
+.ww-widget[editable][data-ww-deleting]::after {
+  border-color: var(--sl-color-danger-400);
+}*/
+
 .ww-widget[editable][data-ww-deleting]::before {
   content: "";
   position: absolute;
@@ -177,10 +199,6 @@ figure.ProseMirror-selectednode::before {
   height: 100%;
 }
 
-.ww-widget[editable][data-ww-deleting]::after {
-  background: var(--sl-color-danger-400);
-}
-
 .ww-widget#ww_preview {
   position: relative;
   display: block;

@webwriter/core/model/schemas/resourceschema/editingstyles.css

@@ -173,7 +173,7 @@ export function toAttributes(node: Node | Attrs, extraAttrs?: Attrs) {
   const attrSpec: (k: string) => AttributeSpec & {private?: boolean} | undefined = (k: string) => complex? (node.type?.spec?.attrs ?? {})[k]: {}
   for (const [k, v] of Object.entries(attrs)) {
     const spec = attrSpec(k)
-    if(k !== "data" && v !== undefined && (spec?.default !== v) && !spec?.private) {
+    if(k !== "data" && v && (spec?.default !== v) && !spec?.private) {
       outputAttrs[k] = Array.isArray(v)? v.join(" "): v 
     }
     if(k === "data") {

@webwriter/core/model/schemas/resourceschema/htmlelementspec.ts

@@ -100,13 +100,18 @@ export const basePlugin = () => ({
       content: "text | phrasing*",
       whitespace: "pre"
     }),
+    div: HTMLElementSpec({
+      tag: "div",
+      group: "flow palpable",
+      content: "flow*"
+    }),
     pre: HTMLElementSpec({
       tag: "pre",
       group: "flow palpable",
       content: "text | phrasing*",
       whitespace: "pre"
     }),
-    unknownElement: {
+    /*unknownElement: {
       attrs: {
         tagName: {},
         otherAttrs: {default: {}}
@@ -133,7 +138,7 @@ export const basePlugin = () => ({
         "data-ww-editing": CustomElementName.safeParse(node.attrs.tagName).success? "unknowncustom": "unknownbuiltin",
         "data-ww-tagname": node.attrs.tagName
       }]
-    },
+    },*/
   },
   topNode: "explorable",
   keymap: baseKeymap,

@webwriter/core/model/schemas/resourceschema/plugins/base.ts

@@ -1,25 +1,96 @@
+import { TextSelection, Command, EditorState, NodeSelection, AllSelection } from "prosemirror-state";
 import { SchemaPlugin } from ".";
+import { range } from "../../../../utility";
 import { HTMLElementSpec } from "../htmlelementspec";
+import {Node, ResolvedPos, NodeType, Attrs, NodeRange, Fragment} from "prosemirror-model"
+import {canSplit, liftTarget} from "prosemirror-transform"
 
-export const modalPlugin = () => ({
-  dialog: HTMLElementSpec({
-    tag: "dialog",
-    group: "flow sectioningroot",
-    content: "flow*",
-    attrs: {
-      open: {default: undefined}
-    }
-  }),
-  details: HTMLElementSpec({
-    tag: "details",
-    group: "flow sectioningroot interactive palpable",
-    content: `summary flow*`,
-    attrs: {
-      open: {default: undefined}
+export function getNodePath($pos: ResolvedPos, excludeRoot=true) {
+  return range($pos.depth + 1).map(k => $pos.node(k)).slice(excludeRoot? 1: 0)
+}
+
+export function getPosPath($pos: ResolvedPos, excludeRoot=true) {
+  return range($pos.depth + 1).map(k => $pos.before(k + 1)).slice(excludeRoot? 1: 0) 
+}
+
+export function findAncestor($pos: ResolvedPos, predicate: (value: [number, Node], index: number, array: [number, Node][]) => boolean) {
+  const nodePath = getNodePath($pos)
+  const posPath = getPosPath($pos)
+  return posPath.map((pos, i) => [pos, nodePath[i]] as [number, Node]).find(predicate) ?? []
+}
+
+export function ancestorOfType($pos: ResolvedPos, type: string) {
+  return findAncestor($pos, ([_, node]) => node?.type.name === type)
+}
+
+function selectDetailsContent(split=false): Command {
+  return (state, dispatch, view) => {
+    const {selection, doc} = state
+    const pType = state.schema.nodes["p"]!
+    const [detailsPos, details] = ancestorOfType(selection.$from, "details")
+    const [summaryPos, summary] = ancestorOfType(selection.$from, "summary")
+    const nodePath = getNodePath(selection.$from)
+    if(details && summary && split) {
+
+      let tr = state.tr.setNodeAttribute(detailsPos! - 1, "open", true)
+      tr = tr.deleteSelection()
+      tr = tr.split(tr.selection.from, undefined, [{type: pType}])
+      dispatch && dispatch(tr)
+      return true
     }
-  }),
-  summary: HTMLElementSpec({
-    tag: "summary",
-    content: "heading"
-  })
+    return false
+  }
+}
+
+export const modalPlugin = () => ({
+  nodes: {
+    dialog: HTMLElementSpec({
+      tag: "dialog",
+      group: "flow sectioningroot",
+      content: "flow*",
+      attrs: {
+        open: {default: undefined}
+      }
+    }),
+    details: HTMLElementSpec({
+      tag: "details",
+      group: "flow sectioningroot interactive palpable",
+      content: `summary flow*`,
+      attrs: {
+        open: {default: undefined}
+      }
+    }),
+    summary: HTMLElementSpec({
+      tag: "summary",
+      content: "phrasing*" // simplified until phrase editing is fixed
+    })
+  },
+  keymap: {
+    "Enter": selectDetailsContent(true),
+    "ArrowDown": selectDetailsContent(),
+    "Backspace": (state, dispatch, view) => {
+      const {selection, doc} = state
+      const [summaryPos, summary] = ancestorOfType(selection.$from, "summary")
+      if(summary && selection.from === summaryPos) {
+        
+      }
+      /*
+      console.log(getNodePath(selection.$from), getPosPath(selection.$from))
+      const [detailsPos, details] = ancestorOfType(selection.$from, "details")
+      const [summaryPos, summary] = detailsPos? [
+        detailsPos + 1,
+        details?.child(0).type.name === "summary"? details?.child(0): undefined
+      ]: []
+      const open = details?.attrs.open
+      console.log(details, summaryPos, selection.from)
+      if(details && summaryPos !== undefined && selection.from === summaryPos) {
+        console.log("backspace handled")
+        let tr = state.tr.setSelection(TextSelection.create(doc, selection.from - 2))
+    
+        dispatch && dispatch(tr)
+        return true
+      }*/
+      return false
+    },
+  }
 } as SchemaPlugin)