add content fragment paragraph counter styles to show author how thei…

…r multi line text field will be divided when authoring in content fragment component.

aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/.content.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:description="used to load dialog helpers into content fragment editor."
+    jcr:primaryType="cq:ClientLibraryFolder"
+    allowProxy="{Boolean}true"
+    categories="[dam.cfm.authoring.v2]"
+    cssProcessor="[default:none,min:none]"
+    jsProcessor="[default:none,min:none]"/>

aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css.txt

@@ -0,0 +1,2 @@
+#base=css
+cf-editor.css

aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css/cf-editor.css

@@ -0,0 +1,29 @@
+/*cf-editor.css - additional styles for content fragment editor*/
+
+/* start counter for every text area */
+.paragraphcounter {
+  counter-reset: cf-rte-par-counter;
+}
+
+/* increment counter every par block and add counter */
+.paragraphcounter > p:before {
+
+  	counter-increment: cf-rte-par-counter;
+	content: "#" counter(cf-rte-par-counter) "";
+	float: right;
+    color: black;
+    background-color: lightgray;
+    width: 40px;
+    text-align: center;
+    border-radius: 100%;
+    vertical-align: middle;
+    opacity: .5;
+
+}
+
+/* highlight every par block */
+.paragraphcounter > p {
+
+	border: 1px dashed rgba(0, 0, 0, .5);
+
+}

aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js.txt

@@ -0,0 +1,2 @@
+#base=js
+cf-editor.js

aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js/cf-editor.js

@@ -0,0 +1,15 @@
+//cf-editor.js - additional logic for content fragment editor
+
+(function ($) {
+    'use strict';
+
+  $("[data-element$='__asset']").each(function(){
+    var name = $(this).attr("data-element").split("__asset")[0];
+    if (name) {
+      console.log("loading paragraph counter to field [" + name + "].");
+      var selector = ".cfm-multieditor:has(input[data-element='" + name + "']) .cfm-multieditor-richtext-editor"
+      $(selector).addClass("paragraphcounter");
+    }
+  })
+
+}(jQuery));