fix: the attributes defined by custom renderer cannot be applied to p…

…aragraph in WYSIWYG(fix #998) (#1033) * fix: add attributes to paragraph for custom renderer * chore: add test case to wwPManager(apply attributes) * chore: change typo * chore: apply code review
nhn · Jun 9, 2020 · 75c7da5 · 75c7da5
1 parent cc54ec2
commit 75c7da5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/apps/editor/src/js/wwPManager.js b/apps/editor/src/js/wwPManager.js
@@ -49,29 +49,39 @@ class WwPManager {
       const wrapper = domUtils.createElementWith(`<div>${html}</div>`);
 
       domUtils.findAll(wrapper, 'p').forEach(para => {
+        const { attributes, nextElementSibling } = para;
         const content = para.innerHTML;
         const lines = content.split(/<br>/gi);
         const lastIndex = lines.length - 1;
-        // cross browsing: old browser not has nextElementSibling attribute
-        const nextElement = para.nextElementSibling || para.nextSibling;
         let splitedContent = '';
 
         splitedContent = lines.map((line, index) => {
-          let result = '';
-
           if (index > 0 && index < lastIndex) {
             line = line ? line : '<br>';
           }
 
           if (line) {
-            result = `<div>${line}</div>`;
+            const block = document.createElement('div');
+
+            Object.keys(attributes).forEach(key => {
+              const { name, value } = attributes[key];
+
+              block.setAttribute(name, value);
+            });
+
+            block.innerHTML = line;
+
+            return block.outerHTML;
           }
 
-          return result;
+          return '';
         });
 
         // For paragraph, we add empty line
-        if (nextElement && nextElement.nodeName === 'P') {
+        if (
+          (nextElementSibling && nextElementSibling.nodeName === 'P') ||
+          para.getAttribute('contenteditable') === 'false'
+        ) {
           splitedContent.push('<div><br></div>');
         }
         domUtils.replaceWith(para, splitedContent.join(''));

diff --git a/apps/editor/test/unit/wwPManager.spec.js b/apps/editor/test/unit/wwPManager.spec.js
@@ -45,4 +45,26 @@ describe('WwPManager', () => {
 
     expect(html).toEqual('<div>text</div><div><br></div><div><a href="#">link</a></div>');
   });
+
+  it('should keep the attributes when wysiwygSetValueBefore event is triggered', () => {
+    const html = em.emitReduce(
+      'wysiwygSetValueBefore',
+      '<p data-custom="custom">text<br><br><a href="#">link</a><br></p>'
+    );
+
+    expect(html).toEqual(
+      '<div data-custom="custom">text</div><div data-custom="custom"><br></div><div data-custom="custom"><a href="#">link</a></div>'
+    );
+  });
+
+  it('should add the empty line when paragraph has contenteditable="false"', () => {
+    const html = em.emitReduce(
+      'wysiwygSetValueBefore',
+      '<p contenteditable="false">text<br><br><a href="#">link</a><br></p>'
+    );
+
+    expect(html).toEqual(
+      '<div contenteditable="false">text</div><div contenteditable="false"><br></div><div contenteditable="false"><a href="#">link</a></div><div><br></div>'
+    );
+  });
 });