Initial

resources/app/common/prosemirror/schema/lists.mjs

@@ -0,0 +1,73 @@
+import {isElementEmpty, onlyInlineContent} from "./utils.mjs";
+
+export const ol = {
+  content: "(list_item | list_item_text)+",
+  managed: {attributes: ["start"]},
+  group: "block",
+  attrs: {order: {default: 1}},
+  parseDOM: [{tag: "ol", getAttrs: el => ({order: el.hasAttribute("start") ? Number(el.start) : 1})}],
+  toDOM: node => node.attrs.order === 1 ? ["ol", 0] : ["ol", {start: node.attrs.order}, 0]
+};
+
+/* -------------------------------------------- */
+
+export const ul = {
+  content: "(list_item | list_item_text)+",
+  group: "block",
+  parseDOM: [{tag: "ul"}],
+  toDOM: () => ["ul", 0]
+};
+
+/* -------------------------------------------- */
+
+/**
+ * ProseMirror enforces a stricter subset of HTML where block and inline content cannot be mixed. For example, the
+ * following is valid HTML:
+ * <ul>
+ *   <li>
+ *     The first list item.
+ *     <ul>
+ *       <li>An embedded list.</li>
+ *     </ul>
+ *   </li>
+ * </ul>
+ *
+ * But, since the contents of the <li> would mix inline content (the text), with block content (the inner <ul>), the
+ * schema is defined to only allow block content, and would transform the items to look like this:
+ * <ul>
+ *   <li>
+ *     <p>The first list item.</p>
+ *     <ul>
+ *       <li><p>An embedded list.</p></li>
+ *     </ul>
+ *   </li>
+ * </ul>
+ *
+ * We can address this by hooking into the DOM parsing and 'tagging' the extra paragraph elements inserted this way so
+ * that when the contents are serialized again, they can be removed. This is left as a TODO for now.
+ */
+
+// In order to preserve existing HTML we define two types of list nodes. One that contains block content, and one that
+// contains text content. We default to block content if the element is empty, in order to make integration with the
+// wrapping and lifting helpers simpler.
+export const li = {
+  content: "paragraph block*",
+  defining: true,
+  parseDOM: [{tag: "li", getAttrs: el => {
+      // If this contains only inline content and no other elements, do not use this node type.
+      if ( !isElementEmpty(el) && onlyInlineContent(el) ) return false;
+    }}],
+  toDOM: () => ["li", 0]
+};
+
+/* -------------------------------------------- */
+
+export const liText = {
+  content: "text*",
+  defining: true,
+  parseDOM: [{tag: "li", getAttrs: el => {
+      // If this contains any non-inline elements, do not use this node type.
+      if ( isElementEmpty(el) || !onlyInlineContent(el) ) return false;
+    }}],
+  toDOM: () => ["li", 0]
+};