More elements ported

app/components/SimpleEditor/config.js

@@ -4,7 +4,6 @@ import {
   CodePackage,
   EmphasisPackage,
   HeadingPackage,
-  // LinkPackage,
   ParagraphPackage,
   PersistencePackage,
   ProseArticle,
@@ -14,15 +13,15 @@ import {
   SuperscriptPackage,
   SwitchTextTypePackage,
   SpellCheckPackage,
-  ListPackage
+  ListPackage,
+  CodeblockPackage
 } from 'substance'
 
 // My Elements
-// import CodeblockPackage from './elements/codeblock/CodeblockPackage'
 import CommentPackage from './elements/comment/CommentPackage'
-// import ExtractPackage from './elements/extract/ExtractPackage'
+import ExtractPackage from './elements/extract/ExtractPackage'
 import NotePackage from './elements/note/NotePackage'
-// import SourceNotePackage from './elements/source_note/SourceNotePackage'
+import SourceNotePackage from './elements/source_note/SourceNotePackage'
 import ImagePackage from './elements/images/ImagePackage'
 //
 import TrackChangePackage from './elements/track_change/TrackChangePackage'
@@ -52,17 +51,17 @@ let config = {
     config.import(SubscriptPackage)
     config.import(SuperscriptPackage)
     config.import(CodePackage)
-    // config.import(LinkPackage)
     config.import(PersistencePackage)
 
     config.import(LinkPackage)
     config.import(SpellCheckPackage)
     config.import(ListPackage)
-    // config.import(CodeblockPackage)
+    config.import(CodeblockPackage)
     // // config.import(DialoguePackage)
-    // config.import(ExtractPackage)
+    config.import(ExtractPackage)
     config.import(NotePackage)
-    // config.import(SourceNotePackage)
+    config.import(SourceNotePackage)
+    config.import(ImagePackage)
     config.import(CommentPackage)
     config.import(ImagePackage)
     //

app/components/SimpleEditor/elements/codeblock/Codeblock.js

-import { TextBlock } from 'substance'
-
-class Codeblock extends TextBlock {}
-
-Codeblock.type = 'codeblock'
-
-export default Codeblock

app/components/SimpleEditor/elements/codeblock/CodeblockComponent.js

-import { TextBlockComponent } from 'substance'
-
-class CodeblockComponent extends TextBlockComponent {
-  render ($$) {
-    let el = super.render.call(this, $$)
-    return el.addClass('sc-codeblock')
-  }
-}
-
-export default CodeblockComponent

app/components/SimpleEditor/elements/codeblock/CodeblockHTMLConverter.js

-export default {
-  type: 'codeblock',
-  tagName: 'pre',
-
-  import: function (el, node, converter) {
-    let codeEl = el.find('code')
-    if (codeEl) {
-      node.content = converter.annotatedText(codeEl, [node.id, 'content'], { preserveWhitespace: true })
-    }
-  },
-
-  export: function (node, el, converter) {
-    let $$ = converter.$$
-
-    el.append(
-      $$('code').append(
-        converter.annotatedText([node.id, 'content'])
-      )
-    )
-  }
-}

app/components/SimpleEditor/elements/codeblock/CodeblockPackage.js

-import Codeblock from './Codeblock'
-import CodeblockComponent from './CodeblockComponent'
-import CodeblockHTMLConverter from './CodeblockHTMLConverter'
-
-export default {
-  name: 'codeblock',
-  configure: function (config) {
-    config.addNode(Codeblock)
-
-    config.addComponent('codeblock', CodeblockComponent)
-    config.addConverter('html', CodeblockHTMLConverter)
-
-    config.addTextType({
-      name: 'codeblock',
-      data: {type: 'codeblock'}
-    })
-
-    config.addLabel('codeblock', {
-      en: 'Codeblock',
-      de: 'Codeblock'
-    })
-  }
-
-  // Codeblock: Codeblock,
-  // CodeblockComponent: CodeblockComponent,
-  // CodeblockHTMLConverter: CodeblockHTMLConverter
-}

app/components/SimpleEditor/elements/codeblock/codeblock.scss

-.sc-codeblock {
-  font-family: var(--font-family-code);
-  font-size: 15px;
-}
-
-// Toolbar styles
-// .sc-switch-text-type .se-option.sm-codeblock {
-//   font-family: var(--font-family-code);
-//   font-size: 15px;
-// }

app/components/SimpleEditor/elements/elements.scss

-@import './codeblock/codeblock';
 @import './comment/comment';
 // @import './dialogue/dialogue';
 @import './extract/extract';

app/components/SimpleEditor/elements/extract/extract.scss

-.sc-extract {
+.sc-prose-editor .se-content .sc-extract {
   font-family: 'Fira Sans';
   font-style: italic;
   font-weight: 300;