Merge pull request #83 from webwriter-app/develop-1.0

Develop 1.0

Author: salmenf

@webwriter/core/model/schemas/contentexpression.ts

@@ -129,9 +129,15 @@ export const ContentExpression = Object.assign(z.string().transform<Expression>(
         parent
       }
       seen.set(expression.raw, result)
-      const nodeContent = node.spec.content
-        ? seen.get(node.spec.content) ?? ContentExpression.resolve(schema, ContentExpression.parse(node.spec.content), result as any, seen)
-        : undefined
+      const seenContent = node.spec.content && seen.get(node.spec.content)
+      let nodeContent = undefined
+      if(!seenContent && node.spec.content) {
+        seen.set(node.spec.content, result)
+        nodeContent = ContentExpression.resolve(schema, ContentExpression.parse(node.spec.content), result as any, seen)
+      }
+      else {
+        nodeContent = seen.get(node.spec.content)
+      }
       return Object.assign(result, {content: nodeContent? [nodeContent]: undefined}) as any
     }
     else if(Array.isArray(content)) {
@@ -152,11 +158,18 @@ export const ContentExpression = Object.assign(z.string().transform<Expression>(
       return expression
     }
   },
-  values(expression: ParentedExpression): ParentedExpression[] {
+  values(expression: ParentedExpression, seen=new WeakSet()): ParentedExpression[] {
     const {content} = expression
-    const values = !content || typeof content === "string"
-      ? []
-      : content.flatMap(c => ContentExpression.values(c))
+    let values
+    if(seen.has(expression)) {
+      values = [] as any
+    } 
+    else {
+      seen.add(expression)
+      values = !content || typeof content === "string"
+        ? []
+        : content.flatMap(c => ContentExpression.values(c, seen))
+    }
     return [expression, ...values]
   }
 })

@webwriter/core/model/schemas/cssvalue.ts

@@ -178,10 +178,10 @@ export class CSSMathValue extends window.CSSMathValue {
   } 
 }
 
-CSSMathValue.parse
-
 export class CSSPercentageValue extends CSSUnitValue {
 
+  static units = ["%"] 
+
   constructor(value: number) {
     super(value, "percent")
   }
@@ -201,6 +201,8 @@ export class CSSPercentageValue extends CSSUnitValue {
 }
 
 export class CSSIntegerValue extends CSSUnitValue {
+
+  static units = []
 
   constructor(value: number) {
     super(value, "number")
@@ -224,6 +226,8 @@ export class CSSIntegerValue extends CSSUnitValue {
 }
 
 export class CSSNumberValue extends CSSUnitValue {
+
+  static units = []
 
   constructor(value: number) {
     super(value, "number")
@@ -244,6 +248,8 @@ export class CSSNumberValue extends CSSUnitValue {
 }
 
 export class CSSFlexValue extends CSSUnitValue {
+
+  static units = ["fr"]
 
   constructor(value: number) {
     super(value, "fr")
@@ -265,7 +271,7 @@ export class CSSFlexValue extends CSSUnitValue {
 
 export class CSSLengthValue extends CSSUnitValue {
 
-  static units = ["cap", "ch", "em", "ex", "ic", "lh", "rcap", "rch", "rem", "rex", "ric", "rlh", "vh", "vw", "vmax", "vmin", "vb", "vi", "cqw", "cqh", "cqi", "cqb", "cqmin", "cqmax", "px", "cm", "mm", "Q", "in", "pc", "pt"] as const
+  static units = ["px", "pt", "cm", "mm", "em", "rem", "ch", "ex", "ic", "lh", "rcap", "rch", "rex", "ric", "rlh", "vh", "vw", "vmax", "vmin", "vb", "vi", "cap", "cqw", "cqh", "cqi", "cqb", "cqmin", "cqmax", "Q", "in", "pc", "pt"] as const
 
   constructor(value: number, unit: typeof CSSLengthValue["units"][number]) {
     super(value, unit)

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

@@ -48,12 +48,12 @@ export function createEditorStateConfig(packages: Package[]) {
     formPlugin(),
     modalPlugin(),
     stylePlugin(),
-    tablePlugin(),
     mathPlugin(),
     phrasingPlugin(),
     svgPlugin(),
     // deprecatedPlugin(),
     widgetPlugin(packages),
+    tablePlugin(),
     basePlugin(),
     grammarPlugin(),
   ]);
@@ -100,7 +100,7 @@ const ResourceSchema = z.object({
         value: z.any(),
         schema: z.instanceof(Schema),
       })
-      .transform(async ({ value, schema }) => {
+      .transform(async ({ value, schema }) => { // @ts-ignore
         for (const parse of Object.values(marshal).map(({ parse }) => parse)) {
           try {
             return await parse(value, schema);

@webwriter/core/model/schemas/resource/plugins/base.css

@@ -67,6 +67,30 @@ html::-webkit-scrollbar-button:vertical:single-button:increment:disabled {
   outline: none;
 }
 
+html.ww-all-selected:not(.ww-empty) {
+  & body {
+    border: 1px solid var(--sl-color-primary-400);
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--sl-color-primary-400);
+      opacity: 10%;
+      pointer-events: none;
+    }
+  }
+
+  & ::selection {
+    background: transparent !important;
+    caret-color: transparent !important;
+  }
+}
+
 a:not([href]) {
   text-decoration: underline;
   color: #0000ee;
@@ -83,6 +107,12 @@ body {
   caret-color: currentColor;
 }
 
+@media screen and (min-width: 1130px) and (max-width: 1360px) {
+  body {
+    margin-left: 0;
+  }
+}
+
 figure:hover {
   position: relative;
 }
@@ -275,7 +305,7 @@ html:is(.ww-key-ctrl, .ww-key-meta) body * {
     .ww-cutting,
     .ww-deleting,
     html:is(.ww-key-ctrl, .ww-key-meta) body *
-  )::before {
+  ):not(html):not(tr)::before {
   content: "";
   position: absolute;
   right: -20px;
@@ -440,27 +470,69 @@ body > .ww-widget::after {
   transition: background-color 0.1s ease;
 }
 
-body > p:first-child {
-  margin-top: 0;
+body > .ProseMirror-gapcursor:first-child {
+  margin-bottom: 0;
 }
 
-table .ProseMirror-gapcursor {
-  border: 2px dashed var(--sl-color-primary-600);
-  display: table-cell;
-  min-width: 1em;
-  padding: 3px 5px;
-  vertical-align: top;
-  box-sizing: border-box;
-  position: relative;
-  height: 100%;
+table, tbody, tr {
+  overflow: visible !important;
 }
 
-table .ProseMirror-gapcursor::after {
-  border-top: none;
-  border-left: 1px solid black;
-  width: 2px;
-  height: 1em;
-  position: static;
+table tr {
+  overflow: visible;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0.0;
+  }
+}
+table :is(thead, tbody, tfoot) > tr:has(+ .ProseMirror-gapcursor) {
+  anchor-name: --table-row;
+} 
+
+table :is(thead, tbody, tfoot) > .ProseMirror-gapcursor {
+  display: inline;
+  position: absolute;
+  top: anchor(--table-row top);
+  right: anchor(--table-row right);
+  height: -1px;
+  position-anchor: --table-row;
+
+  &::after {
+    display: block;
+    content: "";
+    height: calc(1lh + 6px);
+    width: 2px;
+    background: currentColor;
+    z-index: 10;
+    animation: blink 1s step-end 0s infinite;
+    clip-path: unset;
+    margin-left: 2px;
+    margin-top: 2px;
+  }
+}
+
+.ProseMirror-gapcursor + tr td {
+  border-top: none !important;
+}
+
+table .selectedCell {
+  background: var(--sl-color-primary-200) !important;
+}
+
+tr {
+  container-type: inline-size;
+  container-name: table-row;
+}
+
+td:is(:empty, :has(.ProseMirror-trailingBreak)) {
+  height: 1lh;
+  aspect-ratio: 1;
+}
+
+thead, tbody, tfoot {
+  border-left: none !important;
 }
 
 .ProseMirror ::selection:not(.ProseMirror-selectednode) {
@@ -469,6 +541,16 @@ table .ProseMirror-gapcursor::after {
   z-index: 2147483647;
 }
 
+html.ww-cutting ::selection {
+  background-color: var(--sl-color-warning-300);
+}
+
+
+html.ww-deleting ::selection {
+  background-color: var(--sl-color-danger-300);
+}
+
+
 abbr {
   text-decoration: underline 1px dotted currentColor;
 }
@@ -707,7 +789,7 @@ body:has(.ww-fullscreen) > :not(.ww-fullscreen) {
   display: none !important;
 }
 
-@media only screen and (min-width: 1300px) {
+@media only screen and (min-width: 1130px) {
   .ww-widget::part(options) {
     position: fixed;
     width: var(--ww-toolbox-action-width);
@@ -750,4 +832,4 @@ body:has(.ww-fullscreen) > :not(.ww-fullscreen) {
   .ProseMirror[data-empty]::before {
     display: none;
   }
-}
+}

@webwriter/core/model/schemas/resource/plugins/form.ts

@@ -17,6 +17,7 @@ export const formPlugin = () => ({
         tag: "button",
         content: "phrasing*",
         group: "flow interactive listed labelable submittable formassociated palpable inlinecontainer",
+        atom: true,
         attrs: {
           autofocus: {default: undefined},
           disabled: {default: undefined},
@@ -34,6 +35,7 @@ export const formPlugin = () => ({
       input: HTMLElementSpec({
         tag: "input",
         group: "flow listed submittable resettable formassociated labelable palpable",
+        atom: true,
         attrs: {
           accept: {default: undefined},
           alt: {default: undefined},
@@ -71,6 +73,7 @@ export const formPlugin = () => ({
       textarea: HTMLElementSpec({
         tag: "textarea",
         group: "flow listed submittable resettable formassociated labelable palpable",
+        atom: true,
         attrs: {
           autocapitalize: {default: undefined},
           autocomplete: {default: undefined},
@@ -96,6 +99,7 @@ export const formPlugin = () => ({
       select: {
         tag: "select",
         group: "flow interactive listed labelable resettable submittable formassociated",
+        atom: true,
         attrs: {
           autocomplete: {default: undefined},
           autofocus: {default: undefined},
@@ -113,6 +117,7 @@ export const formPlugin = () => ({
       meter: {
         tag: "meter",
         group: "flow labelable palpable",
+        atom: true,
         content: "phrasing*",
         attrs: {
           value: {default: undefined},
@@ -218,6 +223,7 @@ export const formPlugin = () => ({
         tag: "progress",
         group: "flow labelable palpable containerinline",
         content: "phrasing*",
+        atom: true,
         attrs: {
           max: {default: undefined},
           value: {default: undefined}

@webwriter/core/model/schemas/resource/plugins/index.ts

@@ -23,7 +23,7 @@ export interface SchemaPlugin<
   nodes?: { [key in N]: NodeSpec };
   marks?: { [key in M]: MarkSpec };
   topNode?: N;
-  plugin?: Plugin<PS>;
+  plugin?: Plugin<PS> | Plugin<PS>[];
   keymap?:
     | ((schema: Schema) => Record<string, Command>)
     | Record<string, Command>;
@@ -82,7 +82,7 @@ export function configFromSchemaPlugins(
     history(),
     gapCursor(),
     // virtualCursor(),
-    ...schemaPlugins.filter((p) => p.plugin).map((p) => p.plugin!),
+    ...schemaPlugins.filter((p) => p.plugin).flatMap((p) => p.plugin!),
   ];
   return { schema, doc, plugins };
 }

@webwriter/core/model/schemas/resource/plugins/math.ts

@@ -46,7 +46,7 @@ export function MathMLElementSpec({tag, content, marks, group, inline, atom, att
   }
 }
 
-const MATHML_TAGS = [
+export const MATHML_TAGS = [
   "mtext",
   "annotation",
   "annotation-xml",

@webwriter/core/model/schemas/resource/plugins/style.ts

@@ -41,7 +41,7 @@ export function parseStyleAttrs(dom: HTMLElement | string) {
 }
 
 export function getStyleValues(state: EditorState, view: EditorView & {window: Window}, key: string) {
-  if(!view || view.isDestroyed) {
+  if(!view || view.isDestroyed || !view.dom) {
     return []
   }
   const values = new Set<string>()