https://github.com/Kademi/keditor/issues/67

Kademi · Jul 21, 2019 · 692a4b2 · 692a4b2
1 parent 48e6aeb
commit 692a4b2
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 98 deletions.
diff --git a/dist/js/keditor.js b/dist/js/keditor.js
diff --git a/examples/basic_with_blank_content.html b/examples/basic_with_blank_content.html
@@ -16,43 +16,7 @@
 
     <body>
         <div data-keditor="html">
-            <div id="content-area"><section>
-                <div class="container">
-                    <div class="row">
-                        <div class="col-sm-6" data-type="container-content">
-                            <section data-type="component-text">
-                                <div class="page-header">
-                                    <h1><b class="text-uppercase">Welcome to KEditor</b></h1>
-
-                                    <p class="lead"><em>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</em></p>
-                                </div>
-                            </section>
-                            <section data-type="component-form">
-                                <div class="form-data" style="display: none !important;">[{"type":"text","label":"Your email","placeholder":"Please enter your email address","className":"form-control","name":"text-1561978528572","subtype":"text"},{"type":"button","label":"Subscribe","subtype":"button","className":"btn
-                                    btn-primary","name":"button-1561978530984","style":"primary"}]</div>
-                                <form class="form-content form-horizontal" data-grid="3-9">
-                                    <div class="fb-text form-group field-text-1561978528572"><label for="text-1561978528572" class="fb-text-label control-label col-sm-3">Your email</label>
-                                        <div class="col-sm-9"><input type="text" placeholder="Please enter your email address" class="form-control" name="text-1561978528572" id="text-1561978528572"></div>
-                                    </div>
-                                    <div class="fb-button form-group field-button-1561978530984">
-                                        <div class="col-sm-9 col-sm-offset-3"><button type="button" class="btn btn-primary" name="button-1561978530984" style="primary" id="button-1561978530984">Subscribe</button></div>
-                                    </div>
-                                </form>
-                            </section>
-                            <section data-type="component-audio">
-                                <audio src="http://www.noiseaddicts.com/samples_1w72b820/2558.mp3" controls="" style="width: 100%"></audio>
-                            </section>
-                        </div>
-                        <div class="col-sm-6" data-type="container-content">
-                            <section data-type="component-photo">
-                                <div class="photo-panel">
-                                    <img src="snippets/img/somewhere_bangladesh.jpg" style="display: inline-block;" height="" width="100%">
-                                </div>
-                            </section>
-                        </div>
-                    </div>
-                </div>
-            </section></div>
+            <div id="content-area"></div>
         </div>
 
         <script type="text/javascript" src="./plugins/jquery-1.11.3/jquery-1.11.3.min.js"></script>

diff --git a/src/keditor/component/convertToComponent.js b/src/keditor/component/convertToComponent.js
@@ -1,4 +1,5 @@
 import CSS_CLASS from '../constants/cssClass';
+import getDataAttributes from '../utils/getDataAttributes';
 import initComponent from './initComponent';
 
 export default function (contentArea, container, target, isExisting) {
@@ -7,21 +8,12 @@ export default function (contentArea, container, target, isExisting) {
     }
 
     let self = this;
-    let isSection = target.is('section');
     let component;
+    let dataAttributes = getDataAttributes.call(self, target, null, true);
 
-    if (isSection) {
-        target.addClass(`${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT}`);
-        target.find(`.${CSS_CLASS.COMPONENT_CONTENT}`).length === 0 && target.wrapInner(`<section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT_CONTENT}"></section>`);
-        component = target;
-    } else {
-        target.wrap(`
-            <section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT}">
-                <section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT_CONTENT}"></section>
-            </section>
-        `);
-        component = target.parent().parent();
-    }
+    target.wrap(`<section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT}" data-type="${target.attr('data-type')}" ${dataAttributes.join(' ')}></section>`);
+    target.wrap(`<section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT_CONTENT}"></section>`);
+    component = target.parent().parent();
 
     if (isExisting) {
         component.addClass(`${CSS_CLASS.COMPONENT_EXISTING}`);

diff --git a/src/keditor/component/getComponentContent.js b/src/keditor/component/getComponentContent.js
@@ -1,13 +1,13 @@
 import CSS_CLASS from '../constants/cssClass';
-import getComponentType from './getComponentType';
 import getDataAttributes from '../utils/getDataAttributes';
+import getComponentType from './getComponentType';
 
 export default function (component) {
     let self = this;
     let clonedComponent = component.clone();
     let componentType = getComponentType.call(self, clonedComponent);
     let componentData = KEditor.components[componentType];
-    let dataAttributes = getDataAttributes(clonedComponent, null, true);
+    let dataAttributes = getDataAttributes(clonedComponent, null, false);
     let content;
 
     // Handle iframe-wrapper
@@ -30,9 +30,12 @@ export default function (component) {
         content = componentContent.html();
     }
 
+    // Remove all content inside dynamic element
     clonedComponent.html(content).find('[data-dynamic-href]').each(function () {
         $(this).html('');
     });
 
-    return `<section ${dataAttributes.join(' ')}>${clonedComponent.html()}</section>`;
+    clonedComponent.children().attr(dataAttributes);
+
+    return clonedComponent.html();
 };
diff --git a/src/keditor/container/convertToContainer.js b/src/keditor/container/convertToContainer.js
@@ -5,18 +5,9 @@ export default function (contentArea, target) {
     let self = this;
     let container;
 
-    if (target.is('section')) {
-        target.addClass(`${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER}`);
-        target.wrapInner(`<section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER_INNER}"></section>`);
-        container = target;
-    } else {
-        target.wrap(`
-            <section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER}">
-                <section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER_INNER}"></section>
-            </section>
-        `);
-        container = target.parent().parent();
-    }
+    target.wrap(`<section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER}"></section>`);
+    target.wrap(`<section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER_INNER}"></section>`);
+    container = target.parent().parent();
 
     initContainer.call(self, contentArea, container);
 };
diff --git a/src/keditor/container/getContainerContent.js b/src/keditor/container/getContainerContent.js
@@ -25,5 +25,5 @@ export default function getContainerContent (container, isNested) {
         containerContent.html(content);
     });
 
-    return `${containerInner.html()}`;
+    return containerInner.html();
 }
diff --git a/src/keditor/modal/addSnippetToTarget.js b/src/keditor/modal/addSnippetToTarget.js
@@ -1,7 +1,8 @@
 import CSS_CLASS from '../constants/cssClass';
 import ACTION_TYPE from '../constants/actionType';
-import initComponent from '../component/initComponent';
-import initContainer from '../container/initContainer';
+import getDataAttributes from '../utils/getDataAttributes';
+import convertToComponent from '../component/convertToComponent';
+import convertToContainer from '../container/convertToContainer';
 
 export default function (e, selectedSnippet, target, targetAction) {
     let self = this;
@@ -45,11 +46,7 @@ export default function (e, selectedSnippet, target, targetAction) {
     self.contentAreasWrapper.find(`.${CSS_CLASS.STATE_TOOLBAR_SHOWED}`).removeClass(CSS_CLASS.STATE_TOOLBAR_SHOWED);
 
     if (isAddingContainer) {
-        newContainer = $(`
-            <section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER} ${CSS_CLASS.STATE_TOOLBAR_SHOWED}">
-                <section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER_INNER}">${snippetContent}</section>
-            </section>
-        `);
+        newContainer = $(snippetContent);
         target[targetAction](newContainer);
 
         if (typeof options.onContainerSnippetAdded === 'function') {
@@ -60,16 +57,19 @@ export default function (e, selectedSnippet, target, targetAction) {
             options.onContentChanged.call(self, e, contentArea);
         }
 
-        initContainer.call(self, contentArea, newContainer);
+        convertToContainer.call(self, contentArea, newContainer);
     }
 
-    if (isAddingComponent) {
-        let dataAttributes = self.getDataAttributes(snippetContentElement, null, true);
+    if (isAddingComponent || isAddingComponentWithContainer) {
+        let dataAttributes = getDataAttributes.call(self, snippetContentElement, null, true);
         newComponent = $(`
-            <section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT} ${CSS_CLASS.STATE_TOOLBAR_SHOWED}" data-type="${snippetType}" ${dataAttributes.join(' ')}>
-                <section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT_CONTENT}">${snippetContent}</section>
-            </section>
+            <div data-type="${snippetType}" ${dataAttributes.join(' ')}>
+                ${snippetContent}
+            </div>
         `);
+    }
+
+    if (isAddingComponent) {
         target[targetAction](newComponent);
 
         let container = target.closest(`.${CSS_CLASS.CONTAINER}`);
@@ -82,21 +82,11 @@ export default function (e, selectedSnippet, target, targetAction) {
             options.onContentChanged.call(self, e, contentArea);
         }
 
-        initComponent.call(self, contentArea, container, newComponent);
+        convertToComponent.call(self, contentArea, container, newComponent);
     }
 
     if (isAddingComponentWithContainer) {
-        let dataAttributes = self.getDataAttributes(snippetContentElement, null, true);
-        newContainer = $(`
-            <section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER} ${CSS_CLASS.STATE_TOOLBAR_SHOWED}">
-                <section class="${CSS_CLASS.UI} ${CSS_CLASS.CONTAINER_INNER}">${options.containerForQuickAddComponent}</section>
-            </section>
-        `);
-        newComponent = $(`
-            <section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT} ${CSS_CLASS.STATE_TOOLBAR_SHOWED}" data-type="${snippetType}" ${dataAttributes.join(' ')}>
-                <section class="${CSS_CLASS.UI} ${CSS_CLASS.COMPONENT_CONTENT}">${snippetContent}</section>
-            </section>
-        `);
+        newContainer = $(options.containerForQuickAddComponent);
         newContainer.find('[data-type="container-content"]').eq(0).html(newComponent);
         target[targetAction](newContainer);
 
@@ -107,7 +97,7 @@ export default function (e, selectedSnippet, target, targetAction) {
         if (typeof options.onContentChanged === 'function') {
             options.onContentChanged.call(self, e, contentArea);
         }
-        
-        initContainer.call(self, contentArea, newContainer);
+
+        convertToContainer.call(self, contentArea, newContainer);
     }
 };