css

editors/demo/src/OEN/OEN.js

@@ -4,7 +4,6 @@ import { Wax } from 'wax-prosemirror-core';
 
 import { OenLayout } from './layout';
 import { config } from './config';
-import { demo } from './demo';
 import { debounce } from 'lodash';
 
 const renderImage = file => {
@@ -26,7 +25,7 @@ const user = {
   username: 'admin',
 };
 
-const val = `<h3>33333</h3><section class="section"><div class="introduction" data-type="content_structure_element"><p>Intro</p></div>
+const val = `<h3>33333</h3><aside class="tip"><p>hohoh</p></aside><section class="section"><div class="introduction" data-type="content_structure_element"><p>Intro</p></div>
               <div class="outline" data-type="content_structure_element"><p>outline</p></div></section>
               <section class="section"><div class="introduction" data-type="content_structure_element"><p>Intro</p></div>
               <div class="outline" data-type="content_structure_element"><p>outline</p></div></section>`;

editors/demo/src/OEN/demo.js

-export const demo = `<h1>Chapter Title</h1><h2>Notes with drag and drop</h2><p class=\"paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis.<span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> </span>Vestibulum non nibh at dolor sodales euismod.<footnote id=\"babccc4a-858e-4296-acf5-8f7f76857f82\">note 2 with <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">some</span> more content</footnote> Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit,<footnote id=\"151828f4-7a2a-4b8f-b50e-8f8821c8db57\">note 1 content<span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> and tracked text</span></footnote> euismod sit amet tellus sed, molestie gravida tortor.</p><h2>Lists</h2><ol><li><p class=\"paragraph\">list item 1</p></li><li><p class=\"paragraph\">list <span class=\"comment\" data-id=\"6b46da14-ebc3-4398-a243-018d8c0f9c79\" data-conversation=\"[{&quot;content&quot;:&quot;demo comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559766164}]\" data-viewid=\"main\" data-group=\"main\">item</span> 2</p><p class=\"paragraph\">list item 2 second paragraph</p></li><li><p class=\"paragraph\">list item 3</p><ol><li><p class=\"paragraph\">nested 1</p></li><li><p class=\"paragraph\">nested 2</p></li><li><p class=\"paragraph\">nested 3</p></li></ol></li><li><p class=\"paragraph\">list item 4</p></li></ol><h2>Track Changes</h2><p class=\"paragraph\">Quisque posuere <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class=\"format-change\" data-id=\"37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5\" data-user=\"1234\" data-username=\"demo\" data-date=\"1609243477509\" data-before=\"[]\" data-after=\"[&quot;strong&quot;]\" data-group=\"main\" data-viewid=\"main\">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. Duis ut volutpat nunc. Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class=\"paragraph\">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam<span class=\"insertion\" data-id=\"\" data-user=\"b3cfc28e-0f2e-45b5-b505-e66783d4f946\" data-username=\"admin\" data-date=\"0\" data-group=\"\" data-viewid=\"\" style=\"color: royalblue;\"> an addition</span> in aliquam ex.</p><h2>Code blocks</h2><pre data-params=\"\"><code>#include &lt;iostream&gt;\nint main(int argc, char *argv[]) {\n\n  /* An annoying \"Hello World\" example */\n  for (auto i = 0; i &lt; 0xFFFF; i++)\n    cout &lt;&lt; \"Hello, World!\" &lt;&lt; endl;\n\n  char c = '\n';\n  unordered_map &lt;string, vector&lt;string&gt; &gt; m;\n  m[\"key\"] = \"\"; // this is an error\n\n  return -2e3 + 12l;\n}</code></pre><h2>Tables</h2><table><tbody><tr><th colspan=\"4\"><p class=\"paragraph\">TABLE HEADER</p></th></tr><tr><td><p class=\"paragraph\">a <span class=\"comment\" data-id=\"dbc46918-f926-4126-85c7-2a6876d24528\" data-conversation=\"[{&quot;content&quot;:&quot;comment&quot;,&quot;displayName&quot;:&quot;demo&quot;,&quot;timestamp&quot;:1601559775708}]\" data-viewid=\"main\" data-group=\"main\">random</span> value</p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\">another one</p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr></tbody></table><p class=\"paragraph\">Integer eu ornare turpis, vel faucibus augue. Integer tempus sed nisl ac tempus. Vivamus iaculis tempor nisl ut congue. Ut nec sollicitudin magna. Morbi consequat ultricies ligula, vel egestas lorem. Nulla volutpat lectus lectus, eu feugiat nisl ultrices id. Donec suscipit, felis et eleifend ultricies, sem tortor fermentum libero, at elementum nisl nulla a odio. Ut ut tempus massa. Vestibulum porttitor nisl id velit dapibus, eget molestie ex placerat. Proin sagittis elit in nulla semper gravida. Sed laoreet rutrum fermentum.</p><h2>Math</h2><math-display class=\"math-node\">A = \\begin{bmatrix} x &amp; y \\\\ z &amp; w \\end{bmatrix}</math-display><p class=\"paragraph\"></p><p class=\"paragraph\">Quisque vel vehicula orci. Quisque congue accumsan mi, nec dapibus lectus interdum non. Curabitur consectetur pellentesque mattis. Etiam dignissim quam in dui pretium pulvinar. Vestibulum vehicula vulputate arcu quis luctus. Donec sollicitudin nisl a lacinia placerat. Sed elit odio, fermentum ac tempor eget, viverra et ipsum.</p>`;

wax-prosemirror-services/src/OENContainersService/oenContainers.css

-div[data-type="content_structure_element"] {
+div[data-type="content_structure_element"], 
+aside {
     border-left: 3px solid #f5f5f7;
     padding: 10px 10px 0 10px;
     
 }
 
-div[data-type="content_structure_element"]::before {
+div[data-type="content_structure_element"]::before, aside::before {
     border: 3px solid #f5f5f7;
     background-color: #f5f5f7;
     width: 100%;
@@ -13,6 +14,7 @@ div[data-type="content_structure_element"]::before {
 
 .ProseMirror section {
     position: relative;
+    display: block;
     padding: 10px 10px 0 10px;
     margin-top: 20px;
     border: 3px solid #E2EBFF;
@@ -21,9 +23,9 @@ div[data-type="content_structure_element"]::before {
 .ProseMirror section::before {
     content: 'Section';
     color: #c7d8fc;
+    height: 15px;
     font-weight: bold;
     position: absolute;
-    display: inline-block;
     bottom: 0;
     top: -25px;
     left: -3px;
@@ -83,4 +85,32 @@ content: 'Learning Objectives Section';
 
 .content-opener-image::before {
     content: 'Content Opener Image Section';
+}
+
+.note::before {
+    content: 'Note(short)';
+}
+
+.tip::before {
+    content: 'Tip(short)';
+}
+
+.warning::before {
+    content: 'Warning(short)';
+}
+
+.reminder::before {
+    content: 'Reminder(short)';
+}
+
+.case-study::before {
+    content: 'Case Study(long)';
+}
+
+.biography::before {
+    content: 'Biography(long)';
+}
+
+.worked-example::before {
+    content: 'Worked Example(long)';
 }
\ No newline at end of file