diff --git a/editors/demo/src/Editoria/layout/EditorElements.js b/editors/demo/src/Editoria/layout/EditorElements.js
index 4a2b56a85e2dc268ab745c139b8121aa37abde1a..173984e89bebeb841110f2e6f20862ccc7d61a1a 100644
--- a/editors/demo/src/Editoria/layout/EditorElements.js
+++ b/editors/demo/src/Editoria/layout/EditorElements.js
@@ -13,7 +13,6 @@ const fontWriting = css`
export default css`
.ProseMirror {
background: white;
- counter-reset: footnote;
line-height: 1.6;
${fontWriting}
@@ -36,31 +35,6 @@ export default css`
}
}
- .ProseMirror .wax-selection-marker {
- background-color: ${th('colorSelection')};
- opacity: 0.8;
- }
-
- .ProseMirror footnote {
- font-variant-numeric: lining-nums proportional-nums;
- display: inline-block;
- text-align: center;
- width: 17px;
- height: 17px;
- background: white;
- border-bottom: 2px solid black;
- color: black;
- cursor: pointer;
- }
-
- .ProseMirror footnote::after {
- content: counter(footnote);
- position: relative;
- bottom: 2px;
- font-size: 16px;
- counter-increment: footnote;
- }
-
hr {
padding: 2px 10px;
border: none;
@@ -87,38 +61,6 @@ export default css`
margin-right: 0;
}
- figure {
- display: table;
- margin-left: auto;
- margin-right: auto;
- word-break: break-word;
-
- img {
- cursor: default;
- height: auto;
- max-width: 100%;
- width: auto;
- }
-
- figcaption {
- background: #e2ebff;
- caption-side: bottom;
- display: table-caption;
- max-width: 100%;
- min-height: 20px;
- padding: 4px;
- width: auto;
-
- &:focus {
- outline: none;
- }
- &:before {
- content: 'Caption: ';
- font-weight: bold;
- }
- }
- }
-
sup,
sub {
line-height: 0;
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index 621d7a25c2253f5fc41267b9586e5873f5c1e353..30fb382df8038f5805a9f4d9765fb1a4f2d5f062 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -38,11 +38,6 @@ export default css`
}
}
- .ProseMirror .wax-selection-marker {
- background-color: ${th('colorSelection')};
- opacity: 0.8;
- }
-
ul,
ol {
padding-left: 30px;
@@ -55,38 +50,6 @@ export default css`
padding-left: 1em;
}
- figure {
- display: table;
- margin-left: auto;
- margin-right: auto;
- word-break: break-word;
-
- img {
- cursor: default;
- height: auto;
- max-width: 100%;
- width: auto;
- }
-
- figcaption {
- background: #e2ebff;
- caption-side: bottom;
- display: table-caption;
- max-width: 100%;
- min-height: 20px;
- padding: 4px;
- width: auto;
-
- &:focus {
- outline: none;
- }
- &:before {
- content: 'Caption: ';
- font-weight: bold;
- }
- }
- }
-
sup,
sub {
line-height: 0;
diff --git a/wax-prosemirror-core/src/styles/styles.css b/wax-prosemirror-core/src/styles/styles.css
index 41cee252b2a4c48499645ca7ca74029af30311c4..82791dcff2a66286112208c0b71bd212ae41f940 100644
--- a/wax-prosemirror-core/src/styles/styles.css
+++ b/wax-prosemirror-core/src/styles/styles.css
@@ -202,3 +202,9 @@ img.ProseMirror-separator {
.transform-icon {
transform: rotate(40deg);
}
+
+ /* Wax Selection Marker */
+ .ProseMirror .wax-selection-marker {
+ background-color: #C5D7FE;
+ opacity: 0.8;
+ }
\ No newline at end of file
diff --git a/wax-prosemirror-services/src/ImageService/ImageService.js b/wax-prosemirror-services/src/ImageService/ImageService.js
index 13b1612440ad896c18d1d7350cc2c484f1caf393..d45d2074a100bc770ee5a7982205ced3b51eed92 100644
--- a/wax-prosemirror-services/src/ImageService/ImageService.js
+++ b/wax-prosemirror-services/src/ImageService/ImageService.js
@@ -6,6 +6,7 @@ import {
import { PlaceHolderPlugin, captionPlugin } from 'wax-prosemirror-plugins';
import Service from '../Service';
import Image from './Image';
+import './image.css';
class ImageService extends Service {
name = 'ImageService';
@@ -31,11 +32,12 @@ class ImageService extends Service {
},
{ toWaxSchema: true },
);
- createNode({
- figcaption: figureCaptionNode,
- }
- // ,
- // { toWaxSchema: true },
+ createNode(
+ {
+ figcaption: figureCaptionNode,
+ },
+ // ,
+ // { toWaxSchema: true },
);
}
}
diff --git a/wax-prosemirror-services/src/ImageService/image.css b/wax-prosemirror-services/src/ImageService/image.css
new file mode 100644
index 0000000000000000000000000000000000000000..6e7f312e773d12f2d2c31214691075b5eca9cdc0
--- /dev/null
+++ b/wax-prosemirror-services/src/ImageService/image.css
@@ -0,0 +1,32 @@
+figure {
+ display: table;
+ margin-left: auto;
+ margin-right: auto;
+ word-break: break-word;
+}
+
+figure img {
+ cursor: default;
+ height: auto;
+ max-width: 100%;
+ width: auto;
+}
+
+figcaption {
+ background: #e2ebff;
+ caption-side: bottom;
+ display: table-caption;
+ max-width: 100%;
+ min-height: 20px;
+ padding: 4px;
+ width: auto;
+ }
+
+figcaption:focus {
+ outline: none;
+}
+
+figcaption:before {
+ content: 'Caption: ';
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/wax-prosemirror-services/src/NoteService/NoteService.js b/wax-prosemirror-services/src/NoteService/NoteService.js
index c37a9d91eb0249a30c347ad10b8dd39a2bf82a15..e549f1167fa62c54b28de57346d569563bb371ba 100644
--- a/wax-prosemirror-services/src/NoteService/NoteService.js
+++ b/wax-prosemirror-services/src/NoteService/NoteService.js
@@ -2,6 +2,7 @@ import { footNoteNode } from 'wax-prosemirror-schema';
import Service from '../Service';
import Note from './Note';
import NoteComponent from './NoteComponent';
+import './note.css';
class NoteService extends Service {
name = 'NoteService';
diff --git a/wax-prosemirror-services/src/NoteService/note.css b/wax-prosemirror-services/src/NoteService/note.css
new file mode 100644
index 0000000000000000000000000000000000000000..d42cfb8950d2c38587faa6db12851a25ac9217c5
--- /dev/null
+++ b/wax-prosemirror-services/src/NoteService/note.css
@@ -0,0 +1,25 @@
+/* FootNote */
+
+.ProseMirror {
+ counter-reset: footnote;
+}
+
+.ProseMirror footnote {
+ font-variant-numeric: lining-nums proportional-nums;
+ display: inline-block;
+ text-align: center;
+ width: 17px;
+ height: 17px;
+ background: white;
+ border-bottom: 2px solid black;
+ color: black;
+ cursor: pointer;
+ }
+
+ .ProseMirror footnote::after {
+ content: counter(footnote);
+ position: relative;
+ bottom: 2px;
+ font-size: 16px;
+ counter-increment: footnote;
+ }
\ No newline at end of file