ACP-187 - Support tagName and attributes in customStyleFn

examples/draft-0-10-0/customStyles/RichEditor.css

@@ -102,3 +102,8 @@
 .rte__highlight {
   background-image: linear-gradient(rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0.5));
 }
+
+/* Simple styles for tagName and attributes showcase */
+abbr {
+  border-bottom: 1px dotted #333;
+}

examples/draft-0-10-0/customStyles/customStyles.html

@@ -27,10 +27,14 @@
     <div class="docs">
       <h1>DraftJS Inline style customization test</h1>
       <p>This page showcases customizations of the DraftJS editor and scenarios for it's testing. It is also a documentation for the type of customizations made.</p>
-      <h2>Class name support for inline styles</h2>
-      <p>DraftJS editor supports natively only inline styles rendered directly to the editor leaf DOM nodes. With this customization <code>className</code> property can be added to the style object and it renders to the <code>class</code> attribute in the resulting HTML.</p>
-      <p>Add text and apply <strong>Leaf</strong> inline style from the toolbar. The style should be applied (Kontent.ai logo <span class="rte__inline-leaf rte__inline-leaf-programmatic" style="display: inline-block; text-decoration: underline;">leaf</span> design), there should be inline style <code>display: inline-block; text-decoration: underline;</code> and class names <code>rte__inline-leaf rte__inline-leaf-programmatic</code> rendered.</p>
-      <p>It should combine well with the <strong>Highlight</strong> inline style from the toolbar which should apply <span class="rte__highlight">highlight</span> and class name <code>rte__highlight</code> and mix properly with the other styles including <strong>LEAF</strong> like this: <span class="rte__inline-leaf rte__inline-leaf-programmatic" style="display: inline-block; text-decoration: underline;">Hello </span><span class="rte__inline-leaf rte__inline-leaf-programmatic rte__highlight" style="display: inline-block; text-decoration: underline;">world</span></p>
+      <h2>Enhanced inline style customization</h2>
+      <p>DraftJS editor supports natively only inline styles rendered directly to the editor leaf DOM nodes. With this customization, the style object can include <code>className</code>, <code>tagName</code>, and <code>attributes</code> properties to render semantic HTML elements with custom styling and accessibility features.</p>
+
+      <p><strong>Class name support:</strong> Add text and apply <strong>Leaf</strong> inline style from the toolbar. The style should be applied (Kontent.ai logo <span class="rte__inline-leaf rte__inline-leaf-programmatic" style="display: inline-block; text-decoration: underline;">leaf</span> design), there should be inline style <code>display: inline-block; text-decoration: underline;</code> and class names <code>rte__inline-leaf rte__inline-leaf-programmatic</code> rendered.</p>
+
+      <p><strong>TagName and attributes support:</strong> The <strong>Highlight</strong> style renders as <code>&lt;mark&gt;</code> with <code>title</code> and <code>aria-label</code> attributes: <mark class="rte__highlight" title="Highlighted text for emphasis" aria-label="Important highlighted content">important text</mark></p>
+
+      <p>These features work together - the highlight combines semantic markup, CSS classes, and accessibility attributes. Try applying both styles and inspect the DOM to see the custom elements and attributes.</p>
       <h2>RTL short-circuit</h2>
       <p>We disabled the default handling of RTL detection in individual blocks for performance reasons. No need to test it here.</p>
       <h2><code>getIn</code> error</h2>
@@ -177,8 +181,12 @@ <h2><code>getIn</code> error</h2>
         },
 
         HIGHLIGHT: {
+          tagName: 'mark',
+          attributes: {
+            title: 'Highlighted text for emphasis',
+            'aria-label': 'Important highlighted content',
+          },
           className: 'rte__highlight',
-          display: 'inline-block',
         },
       };
 

gulpfile.js

@@ -24,7 +24,6 @@ var rename = require('gulp-rename');
 var gulpUtil = require('gulp-util');
 var StatsPlugin = require('stats-webpack-plugin');
 var through = require('through2');
-var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 var webpackStream = require('webpack-stream');
 
 var paths = {
@@ -46,8 +45,8 @@ var babelOptsJS = {
     }),
   ],
   plugins: [
-    require('@babel/plugin-proposal-nullish-coalescing-operator'),
-    require('@babel/plugin-proposal-optional-chaining'),
+    require('@babel/plugin-transform-nullish-coalescing-operator'),
+    require('@babel/plugin-transform-optional-chaining'),
   ],
 };
 
@@ -59,8 +58,8 @@ var babelOptsFlow = {
     }),
   ],
   plugins: [
-    require('@babel/plugin-proposal-nullish-coalescing-operator'),
-    require('@babel/plugin-proposal-optional-chaining'),
+    require('@babel/plugin-transform-nullish-coalescing-operator'),
+    require('@babel/plugin-transform-optional-chaining'),
   ],
 };
 
@@ -101,22 +100,22 @@ var buildDist = function(opts) {
       libraryTarget: 'umd',
       library: 'Draft',
     },
+    mode: opts.debug ? 'development' : 'production',
     plugins: [
       new webpackStream.webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(
           opts.debug ? 'development' : 'production',
         ),
       }),
-      new webpackStream.webpack.LoaderOptionsPlugin({
-        debug: opts.debug,
-      }),
       new StatsPlugin(`../meta/bundle-size-stats/${opts.output}.json`, {
         chunkModules: true,
       }),
     ],
   };
   if (!opts.debug) {
-    webpackOpts.plugins.push(new UglifyJsPlugin());
+    webpackOpts.optimization = {
+      minimize: true,
+    };
   }
   const wpStream = webpackStream(webpackOpts, null, function(err, stats) {
     if (err) {
@@ -270,6 +269,15 @@ gulp.task(
   }),
 );
 
+gulp.task(
+  'build-only',
+  gulp.series(
+    'clean',
+    gulp.parallel('modules', 'flow'),
+    gulp.parallel('dist', 'dist:min'),
+  ),
+);
+
 gulp.task(
   'default',
   gulp.series(