Skip to content

Commit c8cf943

Browse files
dLamSlo8dLamSlo8
committed
changed all icons to images. fixed underline roundtrip conversion
1 parent 4b4ea4c commit c8cf943

23 files changed

+155
-98
lines changed

‎src/RichTextMenu.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -479,23 +479,19 @@ export default class RichTextMenu extends React.Component<{view: EditorView,
479479
* Renders the rich text menu component.
480480
*/
481481
render() {
482-
483-
const formats = ["format_bold", "format_italic", "format_underline", "strikethrough_s",
484-
"text_fields", "format_list_bulleted", "format_list_numbered", "format_quote", "code", "insert_link", "photo", ];
482+
485483
const tooltips = ["bold", "italic", "underline", "strikethrough", "text-styles", "bulleted-list", "numbered-list", "blockquote", "code", "link", "image"];
486-
const marks = ["strong", "em", "underline", "strikethrough", "heading", "bullet_list", "ordered_list", "blockquote", "code", "link", "image"];
487-
// const separators = ["strong", "bullet_list", "link"]
484+
const marks = ["stick", "strong", "em", "underline", "strikethrough", "heading", "stick", "bullet_list", "ordered_list", "blockquote", "code", "stick", "link", "image"];
488485
return (
489486
<div className="menu">
490-
{formats.map((item, idx) => {
487+
{marks.map((item, idx) => {
491488
return <MenuItem
492489
format={item}
493490
handleClick={this.handleClick}
494-
active={this.state.activeMarks.includes(marks[idx])}
495-
cancelled={this.state.inactiveMarks.includes(marks[idx])}
491+
active={this.state.activeMarks.includes(item)}
492+
cancelled={this.state.inactiveMarks.includes(item)}
496493
tooltip={tooltips[idx]}
497-
// separates={separators.includes(marks[idx])}
498-
key={item} />
494+
key={idx} />
499495
})}
500496
</div>
501497
);

‎src/menuitem.tsx

Lines changed: 75 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ export default class MenuItem extends React.Component<{format: string, active: b
99

1010
constructor(props: any) {
1111
super(props);
12-
this.getFormatMark = this.getFormatMark.bind(this);
12+
// this.getFormatMark = this.getFormatMark.bind(this);
1313
this.getClassName = this.getClassName.bind(this);
14+
this.getImgSrc = this.getImgSrc.bind(this);
1415
}
1516

1617
// componentDidMount() {
@@ -49,69 +50,84 @@ export default class MenuItem extends React.Component<{format: string, active: b
4950
// // }
5051

5152
// }
52-
// /**
53-
// * Gets the icon to be loaded based on the 'format' prop.
54-
// * @returns - Hardcoded 'require' statements because 'require'
55-
// * doesn't allow variables.
56-
// */
57-
// getImgSrc() {
58-
// switch (this.props.format) {
59-
// case "strong":
60-
// return require("../static/scribe-format-strong.svg");
61-
// case "em":
62-
// return require("../static/scribe-format-em.svg");
63-
// case "underline":
64-
// return require("../static/scribe-format-underline.svg");
65-
// case "code":
66-
// return require("../static/scribe-format-code.svg");
67-
// case "strikethrough":
68-
// return require("../static/scribe-format-strikethrough.svg");
69-
// case "blockquote":
70-
// return require("../static/scribe-format-blockquote.svg");
71-
// default:
72-
// break;
73-
// }
74-
// }
75-
7653
/**
77-
* Gets the name of the format in ProseMirror language.
54+
* Gets the icon to be loaded based on the 'format' prop.
55+
* @returns - Hardcoded 'require' statements because 'require'
56+
* doesn't allow variables.
7857
*/
79-
getFormatMark() {
58+
getImgSrc() {
8059
switch (this.props.format) {
81-
case "format_bold":
82-
return "strong";
83-
case "format_italic":
84-
return "em";
85-
case "format_underline":
86-
return "underline";
60+
case "strong":
61+
return require("../static/scribe-format-bold.svg");
62+
case "em":
63+
return require("../static/scribe-format-italic.svg");
64+
case "underline":
65+
return require("../static/scribe-format-underline.svg");
8766
case "code":
88-
return "code";
89-
case "strikethrough_s":
90-
return "strikethrough";
91-
case "format_quote":
92-
return "blockquote";
93-
case "insert_link":
94-
return "link";
95-
case "photo":
96-
return "image";
97-
case "format_list_bulleted":
98-
return "bullet_list";
99-
case "format_list_numbered":
100-
return "ordered_list";
101-
case "text_fields":
102-
return "heading";
67+
return require("../static/scribe-format-code.svg");
68+
case "strikethrough":
69+
return require("../static/scribe-format-strikethrough.svg");
70+
case "heading":
71+
return require("../static/scribe-format-text-style.svg");
72+
case "bullet_list":
73+
return require("../static/scribe-format-list-bulleted.svg");
74+
case "ordered_list":
75+
return require("../static/scribe-format-list-numbered.svg");
76+
case "blockquote":
77+
return require("../static/scribe-format-blockquote.svg");
78+
case "link":
79+
return require("../static/scribe-format-link.svg");
80+
case "image":
81+
return require("../static/scribe-format-photo.svg");
82+
case "stick":
83+
return require("../static/scribe-stick.svg");
10384
default:
10485
break;
10586
}
10687
}
10788

89+
// /**
90+
// * Gets the name of the format in ProseMirror language.
91+
// */
92+
// getFormatMark() {
93+
// switch (this.props.format) {
94+
// case "format_bold":
95+
// return "strong";
96+
// case "format_italic":
97+
// return "em";
98+
// case "format_underline":
99+
// return "underline";
100+
// case "code":
101+
// return "code";
102+
// case "strikethrough_s":
103+
// return "strikethrough";
104+
// case "format_quote":
105+
// return "blockquote";
106+
// case "insert_link":
107+
// return "link";
108+
// case "photo":
109+
// return "image";
110+
// case "format_list_bulleted":
111+
// return "bullet_list";
112+
// case "format_list_numbered":
113+
// return "ordered_list";
114+
// case "text_fields":
115+
// return "heading";
116+
// default:
117+
// break;
118+
// }
119+
// }
120+
108121
getClassName() {
109122
let format = this.props.format;
110123
let active = this.props.active;
111124

112-
let str = "material-icons";
125+
let str = "";
126+
127+
if (format === "stick") {
128+
return "menuSeparator";
129+
}
113130

114-
115131
if (format === "insert_link" || format === "photo") {
116132
str += " menuItem";
117133
}
@@ -130,24 +146,26 @@ export default class MenuItem extends React.Component<{format: string, active: b
130146
render() {
131147
if (this.props.cancelled) {
132148
return (
133-
<i
149+
<img
134150
// src={this.getImgSrc()}
135151
// alt="formatting"
136-
id={this.getFormatMark()}
137-
className="material-icons inactive-menu-icon"
152+
id={this.props.format}
153+
src={this.getImgSrc()}
154+
className="inactive-menu-icon"
138155
title={this.props.tooltip}
139-
>{this.props.format}</i>
156+
/>
140157
)
141158
}
142159
else {
143160
return (
144-
<i
161+
<img
145162
// src={this.getImgSrc()}
146163
// alt="formatting"
147-
id={this.getFormatMark()}
164+
id={this.props.format}
148165
className={this.getClassName()}
166+
src={this.getImgSrc()}
149167
title={this.props.tooltip}
150-
onClick={this.props.handleClick}>{this.props.format}</i>
168+
onClick={this.props.format !== "stick" ? this.props.handleClick : () => null} />
151169
)
152170
}
153171

‎src/prosemirror/ProseMirrorEditor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ namespace Private {
379379
// return DecorationSet.create(state.doc, decorations);
380380
// }
381381
// }
382-
// })
382+
// });
383383
let view = new EditorView(host, {
384384
state: EditorState.create({
385385
doc: Markdown.parser.parse(

‎src/prosemirror/from_markdown.ts

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ class MarkdownParseState {
6969
// : (NodeType, ?Object, ?[Node]) → ?Node
7070
// Add a node at the current position.
7171
addNode(type: NodeType, attrs?: Object, content?: [Node]) {
72-
console.log(type, content);
72+
// console.log(type, content);
7373
let node = type.createAndFill(attrs, content, this.marks);
74-
console.log(node);
74+
// console.log(node);
7575
if (!node) return null
7676
this.push(node)
7777
return node
@@ -116,14 +116,14 @@ function noOp() {}
116116
function tokenHandlers(schema: Schema, tokens: Object) {
117117
let handlers = Object.create(null)
118118
for (let type in tokens) {
119-
console.log(type);
119+
// console.log(type);
120120
//@ts-ignore
121121
let spec = tokens[type]
122122
if (spec.block) {
123123
//@ts-ignore
124124
let nodeType = schema.nodeType(spec.block)
125125
if (noOpenClose(type)) {
126-
console.log(type);
126+
// console.log(type);
127127
handlers[type] = (state: any, tok: any) => {
128128
state.openNode(nodeType, attrs(spec, tok))
129129
if (!(type === "display_math")) {
@@ -231,7 +231,7 @@ export class MarkdownParser {
231231
// and create a ProseMirror document as prescribed by this parser's
232232
// rules.
233233
parse(text: string) {
234-
console.log("parsing!");
234+
// console.log("parsing!");
235235
let state = new MarkdownParseState(this.schema, this.tokenHandlers), doc
236236
let tokens = this.tokenizer.parse(text, {});
237237
let newTokens = liftBlockMath(tokens);
@@ -246,13 +246,18 @@ function liftBlockMath(tokens: any[]) {
246246
let newTokens = [];
247247
for (let i = 0; i < tokens.length; i++) {
248248
let token = tokens[i];
249+
249250
if (token.children) {
250-
console.log("found children");
251+
// console.log("found children");
251252
let newChild;
252253
let foundDisplayMath = false;
253254
for (let child = 0; child < token.children.length; child++) {
255+
if (token.children[child].type === "html_inline") {
256+
console.log("found html_inline");
257+
parseHTMLToken(token.children[child]);
258+
}
254259
if (token.children[child].type === "display_math") {
255-
console.log("found the display math");
260+
// console.log("found the display math");
256261
newChild = token.children[child];
257262
newChild.block = true;
258263
newTokens.pop();
@@ -276,3 +281,17 @@ function liftBlockMath(tokens: any[]) {
276281
return newTokens;
277282
}
278283

284+
function parseHTMLToken(token: any) {
285+
console.log("parsing html!");
286+
let regex = RegExp(/(?<=\<).+(?=\>)/);
287+
let htmlTag = regex.exec(token.content)[0];
288+
if (htmlTag.includes("/")) {
289+
token.type = htmlTag.slice(1) + "_close";
290+
}
291+
else {
292+
token.type = htmlTag + "_open";
293+
}
294+
console.log(token);
295+
return token;
296+
}
297+

‎src/prosemirror/markdown.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { schema } from './prosemirror-schema';
44
import { Fragment, Mark } from "prosemirror-model";
55
import { MarkdownParser } from "./from_markdown";
66

7-
const md = require('markdown-it')().use(require('markdown-it-mathjax')());
7+
const md = require('markdown-it')({html: true}).use(require('markdown-it-mathjax')());
88
export const parser = new MarkdownParser(schema, md, {
99
blockquote: {block: "blockquote"},
1010
paragraph: {block: "paragraph"},

‎static/scribe-arrow-left.svg

Lines changed: 1 addition & 0 deletions
Loading

‎static/scribe-arrow-right.svg

Lines changed: 1 addition & 0 deletions
Loading

‎static/scribe-checkmark.svg

Lines changed: 1 addition & 0 deletions
Loading

‎static/scribe-format-blockquote.svg

100644100755
Lines changed: 1 addition & 1 deletion
Loading

‎static/scribe-format-strong.svg renamed to ‎static/scribe-format-bold.svg

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)