@tinymce/tinymce-svelte 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 0.1.2
+### Added
+- `cssClass` property for wrapping div
+
 ## 0.1.1
 ### Added
 - onDestroy cleanup

package/README.md

@@ -54,6 +54,7 @@ The editor component accepts the following properties:
   modelEvents="input change undo redo"
   value="value"
   text="readonly-text-output"
+  cssClass="tinymce-wrapper"
 />
 ```
 
@@ -85,6 +86,23 @@ Type: string
 />
 ```
 
+#### CssClass
+
+Specifies the name of the class or classes to use for the `div` wrapping the editor.
+
+Default value: 'tinymce-wrapper'
+Type: string
+
+##### Example using cssClass
+```
+<script>
+let editorCss = 'active editor';
+</script>
+<Editor
+  cssClass={editorCss}
+/>
+```
+
 #### Id
 
 Specified an Id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method.

package/dist/component/Editor.svelte

@@ -52,6 +52,7 @@ export let conf = {};
 export let modelEvents = 'change input undo redo';
 export let value = '';
 export let text = '';
+export let cssClass = 'tinymce-wrapper';
 let container;
 let element;
 let editorRef;
@@ -116,7 +117,7 @@ onDestroy(() => {
     }
 });
 </script>
-  <div bind:this={container}>
+  <div bind:this={container} class={cssClass}>
   {#if inline}
     <div id={id} bind:this={element}></div>
   {:else}

package/dist/index.mjs

@@ -360,7 +360,7 @@ function create_else_block(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, textarea, anchor);
-			/*textarea_binding*/ ctx[16](textarea);
+			/*textarea_binding*/ ctx[17](textarea);
 		},
 		p(ctx, dirty) {
 			if (dirty & /*id*/ 1) {
@@ -369,12 +369,12 @@ function create_else_block(ctx) {
 		},
 		d(detaching) {
 			if (detaching) detach(textarea);
-			/*textarea_binding*/ ctx[16](null);
+			/*textarea_binding*/ ctx[17](null);
 		}
 	};
 }
 
-// (120:2) {#if inline}
+// (121:2) {#if inline}
 function create_if_block(ctx) {
 	let div;
 
@@ -385,7 +385,7 @@ function create_if_block(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-			/*div_binding*/ ctx[15](div);
+			/*div_binding*/ ctx[16](div);
 		},
 		p(ctx, dirty) {
 			if (dirty & /*id*/ 1) {
@@ -394,7 +394,7 @@ function create_if_block(ctx) {
 		},
 		d(detaching) {
 			if (detaching) detach(div);
-			/*div_binding*/ ctx[15](null);
+			/*div_binding*/ ctx[16](null);
 		}
 	};
 }
@@ -414,11 +414,12 @@ function create_fragment(ctx) {
 		c() {
 			div = element("div");
 			if_block.c();
+			attr(div, "class", /*cssClass*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if_block.m(div, null);
-			/*div_binding_1*/ ctx[17](div);
+			/*div_binding_1*/ ctx[18](div);
 		},
 		p(ctx, [dirty]) {
 			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
@@ -432,13 +433,17 @@ function create_fragment(ctx) {
 					if_block.m(div, null);
 				}
 			}
+
+			if (dirty & /*cssClass*/ 4) {
+				attr(div, "class", /*cssClass*/ ctx[2]);
+			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
 			if_block.d();
-			/*div_binding_1*/ ctx[17](null);
+			/*div_binding_1*/ ctx[18](null);
 		}
 	};
 }
@@ -501,6 +506,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { modelEvents = 'change input undo redo' } = $$props;
 	let { value = '' } = $$props;
 	let { text = '' } = $$props;
+	let { cssClass = 'tinymce-wrapper' } = $$props;
 	let container;
 	let element;
 	let editorRef;
@@ -526,18 +532,18 @@ function instance($$self, $$props, $$invalidate) {
 			: conf.inline !== undefined ? conf.inline : false,
 			readonly: disabled,
 			setup: editor => {
-				$$invalidate(12, editorRef = editor);
+				$$invalidate(13, editorRef = editor);
 
 				editor.on('init', () => {
 					editor.setContent(value);
 
 					// bind model events
 					editor.on(modelEvents, () => {
-						$$invalidate(13, lastVal = editor.getContent());
+						$$invalidate(14, lastVal = editor.getContent());
 
 						if (lastVal !== value) {
-							$$invalidate(4, value = lastVal);
-							$$invalidate(5, text = editor.getContent({ format: 'text' }));
+							$$invalidate(5, value = lastVal);
+							$$invalidate(6, text = editor.getContent({ format: 'text' }));
 						}
 					});
 				});
@@ -550,7 +556,7 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		});
 
-		$$invalidate(3, element.style.visibility = '', element);
+		$$invalidate(4, element.style.visibility = '', element);
 		getTinymce().init(finalInit);
 	};
 
@@ -581,47 +587,48 @@ function instance($$self, $$props, $$invalidate) {
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			element = $$value;
-			$$invalidate(3, element);
+			$$invalidate(4, element);
 		});
 	}
 
 	function textarea_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			element = $$value;
-			$$invalidate(3, element);
+			$$invalidate(4, element);
 		});
 	}
 
 	function div_binding_1($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			container = $$value;
-			$$invalidate(2, container);
+			$$invalidate(3, container);
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('id' in $$props) $$invalidate(0, id = $$props.id);
 		if ('inline' in $$props) $$invalidate(1, inline = $$props.inline);
-		if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
-		if ('apiKey' in $$props) $$invalidate(7, apiKey = $$props.apiKey);
-		if ('channel' in $$props) $$invalidate(8, channel = $$props.channel);
-		if ('scriptSrc' in $$props) $$invalidate(9, scriptSrc = $$props.scriptSrc);
-		if ('conf' in $$props) $$invalidate(10, conf = $$props.conf);
-		if ('modelEvents' in $$props) $$invalidate(11, modelEvents = $$props.modelEvents);
-		if ('value' in $$props) $$invalidate(4, value = $$props.value);
-		if ('text' in $$props) $$invalidate(5, text = $$props.text);
+		if ('disabled' in $$props) $$invalidate(7, disabled = $$props.disabled);
+		if ('apiKey' in $$props) $$invalidate(8, apiKey = $$props.apiKey);
+		if ('channel' in $$props) $$invalidate(9, channel = $$props.channel);
+		if ('scriptSrc' in $$props) $$invalidate(10, scriptSrc = $$props.scriptSrc);
+		if ('conf' in $$props) $$invalidate(11, conf = $$props.conf);
+		if ('modelEvents' in $$props) $$invalidate(12, modelEvents = $$props.modelEvents);
+		if ('value' in $$props) $$invalidate(5, value = $$props.value);
+		if ('text' in $$props) $$invalidate(6, text = $$props.text);
+		if ('cssClass' in $$props) $$invalidate(2, cssClass = $$props.cssClass);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*editorRef, lastVal, value, disabled, disablindCache*/ 28752) {
+		if ($$self.$$.dirty & /*editorRef, lastVal, value, disabled, disablindCache*/ 57504) {
 			{
 				if (editorRef && lastVal !== value) {
 					editorRef.setContent(value);
-					$$invalidate(5, text = editorRef.getContent({ format: 'text' }));
+					$$invalidate(6, text = editorRef.getContent({ format: 'text' }));
 				}
 
 				if (editorRef && disabled !== disablindCache) {
-					$$invalidate(14, disablindCache = disabled);
+					$$invalidate(15, disablindCache = disabled);
 					editorRef.setMode(disabled ? 'readonly' : 'design');
 				}
 			}
@@ -631,6 +638,7 @@ function instance($$self, $$props, $$invalidate) {
 	return [
 		id,
 		inline,
+		cssClass,
 		container,
 		element,
 		value,
@@ -657,14 +665,15 @@ class Editor extends SvelteComponent {
 		init(this, options, instance, create_fragment, safe_not_equal, {
 			id: 0,
 			inline: 1,
-			disabled: 6,
-			apiKey: 7,
-			channel: 8,
-			scriptSrc: 9,
-			conf: 10,
-			modelEvents: 11,
-			value: 4,
-			text: 5
+			disabled: 7,
+			apiKey: 8,
+			channel: 9,
+			scriptSrc: 10,
+			conf: 11,
+			modelEvents: 12,
+			value: 5,
+			text: 6,
+			cssClass: 2
 		});
 	}
 }