diff --git a/.gitignore b/.gitignore
index f92f6ff49..6ce8945c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
node_modules/*
.log
.DS_Store
+dist
diff --git a/example/dist/index.html b/example/dist/index.html
deleted file mode 100644
index 8814fa785..000000000
--- a/example/dist/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
- Example
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index f89975ede..095da3cda 100644
--- a/src/index.tsx
+++ b/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 {
}),
new TableRow(),
new Bold(),
+ new Tag(),
new Code(),
new Highlight(),
new Italic(),
@@ -243,6 +246,7 @@ class RichMarkdownEditor extends React.PureComponent {
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 {
// 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;
diff --git a/src/marks/Hidden.ts b/src/marks/Hidden.ts
new file mode 100644
index 000000000..59aaafaee
--- /dev/null
+++ b/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"],
+ };
+ }
+}
diff --git a/src/marks/Tag.ts b/src/marks/Tag.ts
new file mode 100644
index 000000000..28e7e013d
--- /dev/null
+++ b/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" };
+ }
+
+}
diff --git a/src/menus/formatting.ts b/src/menus/formatting.ts
index acaa3fa40..907d7a31b 100644
--- a/src/menus/formatting.ts
+++ b/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),
+ },
];
}
diff --git a/src/nodes/TagNode.ts b/src/nodes/TagNode.ts
new file mode 100644
index 000000000..2aa38d3e6
--- /dev/null
+++ b/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" };
+ }
+}
\ No newline at end of file
diff --git a/src/plugins/Filter.ts b/src/plugins/Filter.ts
new file mode 100644
index 000000000..cfb4d5b24
--- /dev/null
+++ b/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;
+ }
+ })
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/server.ts b/src/server.ts
index 17d6190ba..e02120e89 100644
--- a/src/server.ts
+++ b/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(),