TypeCellOS · matthewlipski · Dec 7, 2022 · Nov 16, 2022 · Nov 16, 2022 · Nov 17, 2022
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -38,7 +38,7 @@ jobs:
         uses: actions/cache@v2
         with:
           path: ~/.cache/ms-playwright
-          key: pw-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          key: pw-new-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
 
       - name: Install Dependencies
         run: npm install

diff --git a/packages/core/src/extensions/Blocks/BlockAttributes.ts b/packages/core/src/extensions/Blocks/BlockAttributes.ts
@@ -1,12 +1,10 @@
 // Object containing all possible block attributes.
 const BlockAttributes: Record<string, string> = {
-  listType: "data-list-type",
   blockColor: "data-block-color",
   blockStyle: "data-block-style",
-  headingType: "data-heading-type",
   id: "data-id",
   depth: "data-depth",
   depthChange: "data-depth-change",
 };
 
-export default BlockAttributes;
+export default BlockAttributes;
diff --git a/packages/core/src/extensions/Blocks/OrderedListPlugin.ts b/packages/core/src/extensions/Blocks/OrderedListPlugin.ts
diff --git a/packages/core/src/extensions/Blocks/PreviousBlockTypePlugin.ts b/packages/core/src/extensions/Blocks/PreviousBlockTypePlugin.ts
@@ -5,18 +5,22 @@ import {
 } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
-import BlockAttributes from "./BlockAttributes";
 
 const PLUGIN_KEY = new PluginKey(`previous-blocks`);
 
-// Inserts "prev-" string into an HTML attribute name with a "data-" prefix, e.g. "data-depth" -> "data-prev-depth".
-// Assumes "data-" prefix is in the attribute name.
-const insertPrev = (attr: string) => attr.slice(0, 5) + "prev-" + attr.slice(5);
+const nodeAttributes: Record<string, string> = {
+  listItemType: "list-item-type",
+  listItemIndex: "list-item-index",
+  headingLevel: "heading-level",
+  type: "type",
+  depth: "depth",
+  "depth-change": "depth-change",
+};
 
 /**
  * This plugin tracks transformation of Block node attributes, so we can support CSS transitions.
  *
- * Problem it solves: Prosemirror recreates the DOM when transactions happen. So when a transaction changes an Node attribute,
+ * Problem it solves: ProseMirror recreates the DOM when transactions happen. So when a transaction changes a Node attribute,
  * it results in a completely new DOM element. This means CSS transitions don't work.
  *
  * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
@@ -75,7 +79,6 @@ export const PreviousBlockTypePlugin = () => {
 
         changes.forEach(() => {
           const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
-
           const oldNodesById = new Map(
             oldNodes.map((node) => [node.node.attrs.id, node])
           );
@@ -84,28 +87,68 @@ export const PreviousBlockTypePlugin = () => {
 
           for (let node of newNodes) {
             const oldNode = oldNodesById.get(node.node.attrs.id);
-            if (oldNode) {
+            const oldContentNode = oldNode?.node.firstChild;
+            const newContentNode = node.node.firstChild;
+            if (oldNode && oldContentNode && newContentNode) {
               const newAttrs = {
-                listType: node.node.attrs.listType,
-                blockColor: node.node.attrs.blockColor,
-                blockStyle: node.node.attrs.blockStyle,
-                headingType: node.node.attrs.headingType,
+                listItemType: newContentNode.attrs.listItemType,
+                listItemIndex: newContentNode.attrs.listItemIndex,
+                headingLevel: newContentNode.attrs.headingLevel,
+                type: newContentNode.type.name,
                 depth: newState.doc.resolve(node.pos).depth,
               };
 
               const oldAttrs = {
-                listType: oldNode.node.attrs.listType,
-                blockColor: oldNode.node.attrs.blockColor,
-                blockStyle: oldNode.node.attrs.blockStyle,
-                headingType: oldNode.node.attrs.headingType,
+                listItemType: oldContentNode.attrs.listItemType,
+                listItemIndex: oldContentNode.attrs.listItemIndex,
+                headingLevel: oldContentNode.attrs.headingLevel,
+                type: oldContentNode.type.name,
                 depth: oldState.doc.resolve(oldNode.pos).depth,
               };
 
+              // Hacky fix to avoid processing certain transactions created by ordered list indexing plugin.
+
+              // True when an existing ordered list item is assigned an index for the first time, which happens
+              // immediately after it's created. Using this condition to start an animation ensures it's not
+              // immediately overridden by a different transaction created by the ordered list indexing plugin.
+              const indexInitialized =
+                oldAttrs.listItemIndex === null &&
+                newAttrs.listItemIndex !== null;
+
+              // True when an existing ordered list item changes nesting levels, before its index is updated by the
+              // ordered list indexing plugin. This condition ensures that animations for indentation still work with
+              // ordered list items, while preventing unnecessary animations being done when dragging/dropping them.
+              const depthChanged =
+                oldAttrs.listItemIndex !== null &&
+                newAttrs.listItemIndex !== null &&
+                oldAttrs.listItemIndex === newAttrs.listItemIndex;
+
+              // Only false for transactions in which the block remains an ordered list item before & after, but neither
+              // of the previous conditions apply.
+              const shouldUpdate =
+                oldAttrs.listItemType === "ordered" &&
+                newAttrs.listItemType === "ordered"
+                  ? indexInitialized || depthChanged
+                  : true;
+
               if (
-                JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs) // TODO: faster deep equal?
+                JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs) && // TODO: faster deep equal?
+                shouldUpdate
               ) {
-                (oldAttrs as any).depthChange = oldAttrs.depth - newAttrs.depth;
+                (oldAttrs as any)["depth-change"] =
+                  oldAttrs.depth - newAttrs.depth;
                 prev.prevBlockAttrs[node.node.attrs.id] = oldAttrs;
+
+                // for debugging:
+                console.log(
+                  "id:",
+                  node.node.attrs.id,
+                  "previousBlockTypePlugin changes detected, oldAttrs",
+                  oldAttrs,
+                  "new",
+                  newAttrs
+                );
+
                 prev.needsUpdate = true;
               }
             }
@@ -119,25 +162,35 @@ export const PreviousBlockTypePlugin = () => {
       decorations(state) {
         const pluginState = (this as Plugin).getState(state);
         if (!pluginState.needsUpdate) {
+          // console.log("0");
           return undefined;
         }
 
         const decorations: Decoration[] = [];
 
         state.doc.descendants((node, pos) => {
           if (!node.attrs.id) {
+            // console.log("1");
             return;
           }
           const prevAttrs = pluginState.prevBlockAttrs[node.attrs.id];
           if (!prevAttrs) {
+            // console.log("2");
             return;
           }
 
           const decorationAttributes: any = {};
           for (let [nodeAttr, val] of Object.entries(prevAttrs)) {
-            decorationAttributes[insertPrev(BlockAttributes[nodeAttr])] =
+            decorationAttributes["data-prev-" + nodeAttributes[nodeAttr]] =
               val || "none";
           }
+
+          // for debugging:
+          console.log(
+            "previousBlockTypePlugin committing decorations",
+            decorationAttributes
+          );
+
           const decoration = Decoration.node(pos, pos + node.nodeSize, {
             ...decorationAttributes,
           });