FEATURE: Improved editor UX

Configuration/NodeTypes.Mixin.PageConfiguration.yaml

@@ -1,7 +1,7 @@
 'CodeQ.JumpMarkers:Mixin.PageConfiguration':
   abstract: true
   properties:
-    heroHashMenu:
+    jumpMarkersEnabled:
       type: boolean
       defaultValue: false
       ui:

Configuration/NodeTypes.Mixin.SectionConfiguration.yaml

@@ -13,18 +13,7 @@
           group: jumpmarker
           view: 'CodeQ.JumpMarkers/Views/AnchorView'
   properties:
-    includeInHashMenu:
-      type: boolean
-      defaultValue: false
-      ui:
-        label: i18n
-        help:
-          message: i18n
-        reloadPageIfChanged: true
-        inspector:
-          group: jumpmarker
-          position: 'before hashMenuTitle'
-    hashMenuTitle:
+    jumpMarkerTitle:
       type: string
       defaultValue: ''
       ui:
@@ -33,12 +22,8 @@
           message: i18n
         reloadPageIfChanged: false
         inspector:
-          hidden: 'ClientEval:node.properties.includeInHashMenu ? false : true'
           group: jumpmarker
           position: 'before sectionId'
-          editorOptions:
-            # Implements a simplified version of the title generation from CodeQ.JumpMarkers:Integration.Helper.NodeTitle
-            placeholder: "ClientEval: (node.properties.hashMenuTitle || node.properties.heroTitle || node.properties.title || '').replace(/<[^>]*>/g, ' ').substr().trim().replace(/(.*)[:.]$/, /*removeDotsFromTheEnd*/ '$1')"
     sectionId:
       type: string
       ui:
@@ -49,7 +34,7 @@
           editorOptions:
             # Implements the most common subset of CodeQ.JumpMarkers:Integration.Helper.NodeAnchorId,
             # fully implementing Carbon.String.urlize(value) would bloat the code too much
-            placeholder: "ClientEval:node.properties.includeInHashMenu ? (node.properties.id || node.properties.hashMenuTitle || node.properties.title || ('node-id-' + node.identifier)).replace('&nbsp;', '-').replace(/<[^>]*>/g, ' ').substr(0, 100).trim().toLowerCase().replaceAll('ä', 'ae').replaceAll('ü', 'ue').replaceAll('ö', 'oe').replaceAll('ß', 'ss').replace(/[^A-Za-z0-9\/]+/g, '-').trim().replace(/^.*?([a-z].*)$/, /*remove non-alpha chars from start*/ '$1').replace(/(.*)-$/, /*remove dashes from end*/ '$1') : ''"
+            placeholder: "ClientEval: (node.properties.jumpMarkerTitle || '').replace('&nbsp;', '-').replace(/<[^>]*>/g, ' ').substr(0, 100).trim().toLowerCase().replaceAll('ä', 'ae').replaceAll('ü', 'ue').replaceAll('ö', 'oe').replaceAll('ß', 'ss').replace(/[^A-Za-z0-9\/]+/g, '-').trim().replace(/^.*?([a-z].*)$/, /*remove non-alpha chars from start*/ '$1').replace(/(.*)-$/, /*remove dashes from end*/ '$1')"
         help:
           message: i18n
       validation:

README.md

@@ -14,7 +14,8 @@ We use semantic versioning so every breaking change will increase the major-vers
 
 ### 1. Configs for Neos content nodes
 
-Add the `CodeQ.JumpMarkers:Mixin.SectionConfiguration` mixin to any content NodeType that you would want to link in a jump marker navigation, or as a permalink with a hash.
+Add the `CodeQ.JumpMarkers:Mixin.SectionConfiguration` mixin to any content NodeType 
+that you would want to link in a jump marker navigation, or as a permalink with a hash.
 
 E.g. this code adds such ability to every Content NodeType:
 
@@ -24,20 +25,22 @@ E.g. this code adds such ability to every Content NodeType:
     'CodeQ.JumpMarkers:Mixin.SectionConfiguration': true
 ```
 
+![inspector editor](editor-demo.png)
+
 ### 2. Render the anchors in the NodeType rendering
 
 You can either render the id on the item itself with:
 ```
 prototype(Vendor:Site) < prototype(Neos.Neos:ContentComponent) {
-    id = CodeQ.JumpMarkers:Integration.Helper.NodeAnchorId
+    id = CodeQ.JumpMarkers:NodeAnchorId
     renderer = afx`
         <section id={props.id}>
             ...
         </section
     `
 ```
 
-or your add an anchor before with the `Flownative.Anchorlinks:AnchorWrapper` processor to the same NodeType renderer 
+or you add an anchor before with the `CodeQ.JumpMarkers:AnchorWrapper` processor to the same NodeType renderer
 to insert an anchor tag with the given id before it.
 
 E.g.:
@@ -52,18 +55,16 @@ prototype(Neos.Neos:Content) {
 Here's an example of how to render a jump marker navigation
 
 ```
-prototype(CodeQ.Site:Integration.Organism.HashMenu) < prototype(Neos.Fusion:Component) {
+prototype(YOUR.Site:Integration.Organism.HashMenu) < prototype(Neos.Fusion:Component) {
     items = Neos.Fusion:Map {
-        items = ${q(documentNode).children('main').children('[instanceof CodeQ.JumpMarkers:Mixin.SectionConfiguration][includeInHashMenu != FALSE][_hidden != TRUE]').get()}
+        items = ${q(documentNode).children('main').children('[instanceof CodeQ.JumpMarkers:Mixin.SectionConfiguration][jumpMarkerTitle][_hidden != TRUE]').get()}
         itemName = 'node'
         itemRenderer = CodeQ.Link:Link {
-            link = CodeQ.JumpMarkers:Integration.Helper.NodeAnchorId {
+            link = CodeQ.JumpMarkers:NodeAnchorId {
                 node = ${node}
                 @process.wrap = ${'#' + value}
             }
-            label = CodeQ.JumpMarkers:Integration.Helper.NodeTitle {
-                node = ${node}
-            }
+            label = ${q(node).property('jumpMarkerTitle')}
         }
     }
 
@@ -84,18 +85,25 @@ prototype(CodeQ.Site:Integration.Organism.HashMenu) < prototype(Neos.Fusion:Comp
 ### 4. Usage for editors
 
 #### Jump markers
-Enable the jump marker for the content NodeType you want to render in the jump marker navigation.
-Then optionally define a title and anchor id manually or use the defaults.
+Enable the jump marker for the content NodeType you want to render in the jump marker navigation by setting a title 
+and optionally a manual anchor id.
 
 #### Permalinks to content nodes
 Choose some content node that you would like to link to, and fill in the `sectionId` property in the inspector.
 
 After that you will see a button appear below the field to copy the link to this node to the clipboard.
 
-When you click that button, the link to the given node will be copied to the clipboard. Paste it in the "insert link" 
+When you click that button, the link to the given node will be copied to the clipboard. Paste it in the "insert link"
 field in Aloha editor, and you are done!
 
+
+### Update from v1.0
+
+The property names have changes and some fallbacks were removed, so an automatic migration is not appled.
+`CodeQ.JumpMarkers:Mixin.SectionConfiguration.DefaultDisabled` was removed,
+`includeInHashMenu` was removed, `hashMenuTitle` was renamed to `jumpMarkerTitle`.
+
 ## Credits
 
-This package is heavily inspired from [Flownative.Anchorlinks v1.2.0](https://github.com/flownative/neos-anchorlinks) 
+This package is heavily inspired by [Flownative.Anchorlinks v1.2.0](https://github.com/flownative/neos-anchorlinks)
 with a lot of code copy-pasted, but with a different purpose. Thanks a lot to Flownative for their package!

Resources/Private/Fusion/AnchorWrapper.fusion

@@ -0,0 +1,10 @@
+##
+# Meant to be used as a processor.
+# Prepends a tag with the sectionId
+##
+prototype(CodeQ.JumpMarkers:AnchorWrapper) < prototype(Neos.Fusion:Value) {
+    anchor = Neos.Fusion:Tag {
+        attributes.id = ${q(node).property('sectionId')}
+    }
+    value = ${q(node).property('sectionId') ? this.anchor + value : value}
+}

Resources/Private/Fusion/Integration/Helper/NodeAnchorId.fusion → Resources/Private/Fusion/NodeAnchorId.fusion

@@ -1,12 +1,12 @@
-prototype(CodeQ.JumpMarkers:Integration.Helper.NodeAnchorId) < prototype(Neos.Fusion:Component) {
+prototype(CodeQ.JumpMarkers:NodeAnchorId) < prototype(Neos.Fusion:Component) {
     # api
     node = ${node}
 
     renderer = Neos.Fusion:Value {
         sectionId = ${q(props.node).property('sectionId')}
 
-        fallback = ${q(props.node).property('id') || q(props.node).property('id') || q(props.node).property('hashMenuTitle') || q(props.node).property('title') || ('node-id-' + props.node.identifier)}
-        fallback.@process.removeHtml = ${String.stripTags(String.pregReplace(String.replace(value, '&nbsp;', '-'), '/<[^>]*>/', ' '))}
+        fallback = ${q(props.node).property('jumpMarkerTitle')}
+        fallback.@process.removeHtml = ${String.stripTags(String.pregReplace(String.replace(value, '&nbsp;', '-'), '/<[^>]*>/', '-'))}
         fallback.@process.shorten = ${String.trim(String.toLowerCase(String.crop(value, 100)))}
         fallback.@process.urlize = ${Carbon.String.urlize(value)}
         fallback.@process.mustStartWithAChar = ${String.pregReplace(value, '/^.*?([a-z].*)$/', '$1')}

Resources/Private/JavaScript/AnchorView/src/AnchorView.js

@@ -80,16 +80,15 @@ export default class AnchorView extends Component {
 						 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
 						 className="svg-inline--fa fa-spinner fa-w-16 fa-spin fa-lg">
 						<path fill="currentColor"
-							  d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
-							  className=""></path>
+							  d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"/>
 					</svg>
 					: ''}
 				{state === 'copied' ?
 					<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="clipboard-check"
 						 className="svg-inline--fa fa-clipboard-check fa-w-12" role="img"
 						 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
 						<path fill="currentColor"
-							  d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z"></path>
+							  d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z"/>
 					</svg>
 					: ''}
 			</div>

Resources/Private/Translations/de/NodeTypes/Mixin/SectionConfiguration.xlf

@@ -6,15 +6,7 @@
 				<source>Jump marker and anchor</source>
 				<target>Sprungmarke und Anker</target>
 			</trans-unit>
-            <trans-unit id="properties.includeInHashMenu" xml:space="preserve">
-				<source>Show jump marker</source>
-                <target>Sprungmarken anzeigen</target>
-			</trans-unit>
-            <trans-unit id="properties.includeInHashMenu.ui.help.message" xml:space="preserve">
-				<source>This Element is shown in the jump marker navigation. You can control whether the jump mark navigation is displayed in the page settings.</source>
-                <target>Dieses Element wird in der Sprungmarken-Navigation angezeigt. Ob die Sprungmarken-Navigation angezeigt wird, kannst du in den Einstellungen der Seite steuern.</target>
-			</trans-unit>
-            <trans-unit id="properties.hashMenuTitle" xml:space="preserve">
+            <trans-unit id="properties.jumpMarkerTitle" xml:space="preserve">
 				<source>Jump marker title</source>
                 <target>Sprungmarken-Titel</target>
 			</trans-unit>

Resources/Private/Translations/en/NodeTypes/Mixin/SectionConfiguration.xlf

@@ -5,13 +5,7 @@
             <trans-unit id="groups.jumpmarker" xml:space="preserve">
 				<source>Jump marker and anchor</source>
 			</trans-unit>
-            <trans-unit id="properties.includeInHashMenu" xml:space="preserve">
-				<source>Show in jump marker navigation</source>
-			</trans-unit>
-            <trans-unit id="properties.includeInHashMenu.ui.help.message" xml:space="preserve">
-				<source>This Element is shown in the jump marker navigation. You can control whether the jump mark navigation is displayed in the page settings.</source>
-			</trans-unit>
-            <trans-unit id="properties.hashMenuTitle" xml:space="preserve">
+            <trans-unit id="properties.jumpMarkerTitle" xml:space="preserve">
 				<source>Jump marker title</source>
 			</trans-unit>
             <trans-unit id="properties.sectionId.ui.help.message" xml:space="preserve">

composer.json

@@ -5,7 +5,8 @@
     "license": "GPL-3.0-or-later",
     "require": {
         "ext-json": "*",
-        "neos/neos": "^4.3 || ^5.0 || ^7.0 || dev-master"
+        "neos/neos": "^4.3 || ^5.0 || ^7.0 || dev-master",
+        "carbon/eel": "^1.0"
     },
     "autoload": {
         "psr-4": {