image and note css

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;

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;

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

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 },
     );
   }
 }

wax-prosemirror-services/src/ImageService/image.css

+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

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';

wax-prosemirror-services/src/NoteService/note.css

+/* 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