@bbl-digital/snorre 2.2.78 → 2.2.81

package/dist/bundle.js

@@ -31107,7 +31107,8 @@
     maxHeight,
     customToolbar,
     invalidMessage,
-    allowImage,
+    allowImages,
+    pasteAsText,
     onChange,
     onBlur
   }) => {
@@ -31117,9 +31118,11 @@
       alert
     } = react.useTheme();
 
-    const handleChange = html => {
+    const handleChange = (html, editor) => {
       setValue(html);
-      onChange(html, html.length);
+      onChange(html, editor.getContent({
+        format: 'text'
+      }).length);
     };
 
     const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
@@ -31132,7 +31135,6 @@
         children: jsxRuntime$1.jsx(tinymceReact.Editor, {
           onBlur: onBlur,
           onInit: () => setLoaded(true),
-          initialValue: initialValue,
           apiKey: TINYMCE_API_KEY,
           value: value,
           onEditorChange: handleChange,
@@ -31148,10 +31150,10 @@
             content_style: editorContentCss,
             language: 'nb_NO',
             block_formats: editorBlockFormats,
-            paste_data_images: allowImage,
-            paste_as_text: type === 'basic',
+            paste_data_images: allowImages,
+            paste_as_text: pasteAsText !== undefined ? pasteAsText : type === 'basic',
             contextmenu: false,
-            invalid_elements: !allowImage ? 'img' : undefined,
+            invalid_elements: !allowImages ? 'img' : undefined,
             default_link_target: '_blank',
             link_assume_external_targets: 'https',
             link_title: false,

package/esm/core/Editor/index.js

@@ -18,7 +18,8 @@ const Editor = ({
   maxHeight,
   customToolbar,
   invalidMessage,
-  allowImage,
+  allowImages,
+  pasteAsText,
   onChange,
   onBlur
 }) => {
@@ -28,9 +29,11 @@ const Editor = ({
     alert
   } = useTheme();
 
-  const handleChange = html => {
+  const handleChange = (html, editor) => {
     setValue(html);
-    onChange(html, html.length);
+    onChange(html, editor.getContent({
+      format: 'text'
+    }).length);
   };
 
   const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
@@ -43,7 +46,6 @@ const Editor = ({
       children: _jsx(TinyEditor, {
         onBlur: onBlur,
         onInit: () => setLoaded(true),
-        initialValue: initialValue,
         apiKey: TINYMCE_API_KEY,
         value: value,
         onEditorChange: handleChange,
@@ -59,10 +61,10 @@ const Editor = ({
           content_style: editorContentCss,
           language: 'nb_NO',
           block_formats: editorBlockFormats,
-          paste_data_images: allowImage,
-          paste_as_text: type === 'basic',
+          paste_data_images: allowImages,
+          paste_as_text: pasteAsText !== undefined ? pasteAsText : type === 'basic',
           contextmenu: false,
-          invalid_elements: !allowImage ? 'img' : undefined,
+          invalid_elements: !allowImages ? 'img' : undefined,
           default_link_target: '_blank',
           link_assume_external_targets: 'https',
           link_title: false,

package/lib/core/Editor/index.d.ts

@@ -13,22 +13,16 @@ interface IProps {
     height?: number;
     /** Max resize height of texteditor */
     maxHeight?: number;
-    /** Maxlength of input, TODO: DEPRICATE?? */
-    maxlength?: number;
-    /** Specifies whether maxlength should include html or not, defaults to 'plaintext', TODO: DEPRICATE?? */
-    maxlengthType?: 'plaintext' | 'html';
-    /** Adds an error message if text is too long, TODO: DEPRICATE?? */
-    maxlengthText?: string;
-    /** Adds a counter of characters compared to maxlength, if maxlength is specified, TODO: DEPRICATE?? */
-    withCounter?: boolean;
     /** Error message */
     invalidMessage?: string;
     /** Allow image in editor */
-    allowImage?: boolean;
+    allowImages?: boolean;
+    /** Strip all pasted styles */
+    pasteAsText?: boolean;
     /** Cb on blur */
     onBlur?: () => void;
     /** Cb on change */
-    onChange: (value: string, htmlCount: number) => void;
+    onChange: (value: string, plainTextLength: number) => void;
 }
 declare const Editor: FC<IProps>;
 export default Editor;

package/lib/core/Editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAgBpC,UAAU,MAAM;IACd,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IAClC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yGAAyG;IACzG,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IACpC,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uGAAuG;IACvG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,mBAAmB;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CACrD;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,MAAM,CAoFtB,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAgBpC,UAAU,MAAM;IACd,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IAClC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,mBAAmB;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3D;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,MAAM,CAqFtB,CAAA;AAED,eAAe,MAAM,CAAA"}

package/lib/core/Editor/index.js

@@ -18,7 +18,8 @@ const Editor = ({
   maxHeight,
   customToolbar,
   invalidMessage,
-  allowImage,
+  allowImages,
+  pasteAsText,
   onChange,
   onBlur
 }) => {
@@ -28,9 +29,11 @@ const Editor = ({
     alert
   } = useTheme();
 
-  const handleChange = html => {
+  const handleChange = (html, editor) => {
     setValue(html);
-    onChange(html, html.length);
+    onChange(html, editor.getContent({
+      format: 'text'
+    }).length);
   };
 
   const toolbar = type === 'basic' ? basicToolbar : type === 'rich' ? richToolbar : customToolbar;
@@ -43,7 +46,6 @@ const Editor = ({
       children: _jsx(TinyEditor, {
         onBlur: onBlur,
         onInit: () => setLoaded(true),
-        initialValue: initialValue,
         apiKey: TINYMCE_API_KEY,
         value: value,
         onEditorChange: handleChange,
@@ -59,10 +61,10 @@ const Editor = ({
           content_style: editorContentCss,
           language: 'nb_NO',
           block_formats: editorBlockFormats,
-          paste_data_images: allowImage,
-          paste_as_text: type === 'basic',
+          paste_data_images: allowImages,
+          paste_as_text: pasteAsText !== undefined ? pasteAsText : type === 'basic',
           contextmenu: false,
-          invalid_elements: !allowImage ? 'img' : undefined,
+          invalid_elements: !allowImages ? 'img' : undefined,
           default_link_target: '_blank',
           link_assume_external_targets: 'https',
           link_title: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "2.2.78",
+  "version": "2.2.81",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",