Inline tags

.gitignore

@@ -1,3 +1,4 @@
 node_modules/*
 .log
 .DS_Store
+dist

src/index.tsx

@@ -53,6 +53,7 @@ import Highlight from "./marks/Highlight";
 import Italic from "./marks/Italic";
 import Link from "./marks/Link";
 import Strikethrough from "./marks/Strikethrough";
+import Tag from "./marks/Tag";
 
 // plugins
 import BlockMenuTrigger from "./plugins/BlockMenuTrigger";
@@ -62,6 +63,7 @@ import Placeholder from "./plugins/Placeholder";
 import SmartText from "./plugins/SmartText";
 import TrailingNode from "./plugins/TrailingNode";
 import MarkdownPaste from "./plugins/MarkdownPaste";
+import Filter from "./plugins/Filter";
 
 export { schema, parser, serializer } from "./server";
 
@@ -230,6 +232,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
         }),
         new TableRow(),
         new Bold(),
+        new Tag(),
         new Code(),
         new Highlight(),
         new Italic(),
@@ -243,6 +246,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
         new SmartText(),
         new TrailingNode(),
         new MarkdownPaste(),
+        new Filter(),
         new Keys({
           onSave: this.handleSave,
           onSaveAndExit: this.handleSaveAndExit,
@@ -379,10 +383,10 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
         // let tempRoot = state.doc;
         // this.traverse(tempRoot, "");
         // 
-        console.log("calling modelChange");
-        if (this.props.onModelChange){
-          state.doc = this.props.onModelChange(state.doc);
-        }
+        // console.log("calling modelChange");
+        // if (this.props.onModelChange){
+        //   state.doc = this.props.onModelChange(state.doc);
+        // }
 
         this.view.updateState(state);
 
@@ -744,6 +748,14 @@ const StyledEditor = styled("div")<{ readOnly: boolean }>`
     font-style: italic;
   }
 
+  tag {
+    background: yellow;
+  }
+
+  hidden{
+    display: none;
+  }
+
   b,
   strong {
     font-weight: 600;

src/marks/Hidden.ts

@@ -0,0 +1,14 @@
+import Mark from "./Mark";
+
+export default class Hidden extends Mark {
+  get name() {
+    return "hidden";
+  }
+
+  get schema() {
+    return {
+      parseDOM: [{ tag: "hidden" }],
+      toDOM: () => ["hidden"],
+    };
+  }
+}

src/marks/Tag.ts

@@ -0,0 +1,39 @@
+import { toggleMark } from "prosemirror-commands";
+import markInputRule from "../lib/markInputRule";
+import Mark from "./Mark";
+
+export default class Tag extends Mark {
+  get name() {
+    return "tag";
+  }
+
+  get schema() {
+    return {
+      attrs: {
+        name: {
+          default: "ExampleTag",
+        },
+      },
+      parseDOM: [{ tag: "tag" }],
+      toDOM: () => ["tag"],
+    };
+  }
+
+  inputRules({ type }){
+      return[markInputRule(/(?::)([^=]+)(?::)$/, type)]
+  }
+
+  get toMarkdown() {
+    return {
+      open: ":",
+      close: ":",
+      mixable: true,
+      expelEnclosingWhitespace: true,
+    };
+  }
+
+  parseMarkdown() {
+    return { mark: "tag" };
+  }
+
+}

src/menus/formatting.ts

@@ -8,6 +8,7 @@ import {
   LinkIcon,
   StrikethroughIcon,
   HighlightIcon,
+  CommentIcon,
 } from "outline-icons";
 import { isInTable } from "prosemirror-tables";
 import { EditorState } from "prosemirror-state";
@@ -90,5 +91,14 @@ export default function formattingMenuItems(state: EditorState) {
       active: isMarkActive(schema.marks.link),
       attrs: { href: "" },
     },
+    {
+      name: "separator",
+    },
+    {
+      name: "tag",
+      tooltip: "Tag Selection",
+      icon: CommentIcon,
+      active: isMarkActive(schema.marks.tag),
+    },
   ];
 }

src/nodes/TagNode.ts

@@ -0,0 +1,36 @@
+import { wrappingInputRule } from "prosemirror-inputrules";
+import Node from "./Node";
+import toggleWrap from "../commands/toggleWrap";
+
+export default class TagNode extends Node{
+    get name(){
+        return "tag";
+    }
+
+    get schema(){
+        return{
+            content: "block+",      
+            group: "block",
+            parseDOM: [
+                {tag: "tag"},
+            ],
+            toDOM: () => ["tag", 0],
+        }
+    }
+
+    inputRules({ type }) {
+        return [wrappingInputRule(/^\s*:\s$/, type)];
+    }
+
+    commands({ type }) {
+        return () => toggleWrap(type);
+    }
+
+    toMarkdown(state, node) {
+        state.wrapBlock(": ", null, node, () => state.renderContent(node));
+    }
+
+    parseMarkdown() {
+        return { block: "tag" };
+    }
+}

src/plugins/Filter.ts

@@ -0,0 +1,47 @@
+import { Plugin, Transaction } from "prosemirror-state";
+import Extension from "../lib/Extension";
+import Bold from "../marks/Bold";
+import Hidden from "../marks/Hidden";
+
+export default class Filter extends Extension {
+    get name(){
+        return "Filter"
+    }
+
+    get plugins() {
+        return[
+            new Plugin({
+                appendTransaction:  (transactions, oldState, newState) => {
+                    //let returnTransaction = null;
+                    transactions.forEach(transaction => {
+                        let steps = transaction.steps;
+                        console.log(steps);
+                        steps.forEach(step => {
+                            if(step['mark'] !== undefined){
+                                //The transform consists of an addition of mark
+                                let mark = step['mark'];
+                                //If this is a tag Mark
+                                if(mark['type']['name'] == "tag"){
+                                    //Get the tag type
+                                    let tagType = mark['attrs']['name'];
+                                    console.log(tagType);
+                                    //Ideally pass a method through the constructor, 
+                                    //and call our method to get this boolean
+                                    let filter = true;
+                                    if(filter){
+                                        //Not working right now, but trying to add the hidden mark if filter is true
+                                        //returnTransaction = new Transaction(newState.doc);
+                                        //console.log("Adding Mark");
+                                        //console.log(step['from'] + " " + step['to']);
+                                        //returnTransaction.addMark(step['from'], step['to'], new Hidden());
+                                    }
+                                }
+                            }
+                        })
+                    })
+                    //return returnTransaction;
+                }
+            })
+        ]
+    }
+}

src/server.ts

@@ -24,6 +24,7 @@ import TableRow from "./nodes/TableRow";
 
 // marks
 import Bold from "./marks/Bold";
+import Tag from "./marks/Tag";
 import Code from "./marks/Code";
 import Highlight from "./marks/Highlight";
 import Italic from "./marks/Italic";
@@ -35,6 +36,7 @@ const extensions = new ExtensionManager([
   new Text(),
   new Paragraph(),
   new Blockquote(),
+  new Tag(),
   new BulletList(),
   new CodeBlock(),
   new CodeFence(),