Improve handling of unformatted text (#197)

- do not assume any pasted text that includes a span is unformatted (nowiki)
- visually highlight unformatted text in editor
- disable adding format marks (like bold) inside unformatted text
- add 'unformatted' to text style dropdown

Fixes #190

Addresses but does not yet resolve #101

lang/de/lang.php

@@ -92,6 +92,7 @@
 $lang['js']['label:subscript'] = 'tief stellen';
 $lang['js']['label:deleted'] = 'durchstreichen';
 $lang['js']['label:monospaced'] = 'feste Zeichenbreite';
+$lang['js']['label:unformatted'] = 'Wiki-Formatierung ignorieren';
 $lang['js']['label:undo'] = 'rückgängig machen';
 $lang['js']['label:redo'] = 'wiederherstellen';
 

lang/en/lang.php

@@ -92,6 +92,7 @@
 $lang['js']['label:subscript'] = 'subscript';
 $lang['js']['label:deleted'] = 'strike through';
 $lang['js']['label:monospaced'] = 'monospaced';
+$lang['js']['label:unformatted'] = 'ignore wiki formatting';
 $lang['js']['label:undo'] = 'undo';
 $lang['js']['label:redo'] = 'redo';
 

script/plugins/Menu/MenuInitializer.js

@@ -65,6 +65,7 @@ class MenuInitializer {
                 new MarkMenuItemDispatcher('subscript', 'format-subscript', lang['label:subscript']),
                 new MarkMenuItemDispatcher('deleted', 'format-strikethrough', lang['label:deleted']),
                 new MarkMenuItemDispatcher('code', 'console-line', lang['label:monospaced']),
+                new MarkMenuItemDispatcher('unformatted', 'translate-off', lang['label:unformatted']),
             ]),
             LinkMenuItemDispatcher,
             ImageMenuItemDispatcher,

script/schema.js

@@ -326,9 +326,7 @@ export default function getSpec() {
     });
 
     marks = marks.addToEnd('unformatted', {
-        parseDOM: [
-            { tag: 'span', class: 'unformatted' },
-        ],
+        excludes: '_',
         toDOM() {
             return ['span', { class: 'unformatted' }];
         },

style.less

@@ -61,6 +61,11 @@
         }
     }
 
+    span.unformatted {
+        padding: 0.2rem;
+        border: 1px dotted @ini_border;
+    }
+
     .footnote {
         &::after {
             content: counter(prosemirror-footnote) ')';
@@ -97,7 +102,7 @@
         }
 
         div.dropdown_content {
-            width: 10rem;
+            min-width: 12rem;
 
             img {
                 max-width: 1.5rem;