Support custom html tags and attributes

EditorJS/BlockHandler.php

@@ -243,18 +243,108 @@ private function getPurifier($allowedTags)
 
         $sanitizer->set('HTML.Allowed', $allowedTags);
 
-        /**
-         * Define custom HTML Definition for mark tool
-         */
         if ($def = $sanitizer->maybeGetRawHTMLDefinition()) {
-            $def->addElement('mark', 'Inline', 'Inline', 'Common');
+            // modify the raw HTML definition
+            $this->addCustomHTMLDefinitions($def);
         }
 
         $purifier = new \HTMLPurifier($sanitizer);
 
         return $purifier;
     }
 
+    /**
+     * TODO
+     */
+    private function addCustomHTMLDefinitions($def)
+    {
+        if($this->rules->customTags){
+
+            // default to be added
+            $def->addElement('mark', 'Inline', 'Inline', 'Common');
+
+            foreach($this->rules->customTags as $tag => $tagData){
+                /**
+                 * Convenience function that sets up a new element
+                 * @param string $element Name of element to add
+                 * @param string|bool $type What content set should element be registered to?
+                 *              Set as false to skip this step.
+                 * @param string|\HTMLPurifier_ChildDef $contents Allowed children in form of:
+                 *              "$content_model_type: $content_model"
+                 * @param array|string $attr_includes What attribute collections to register to
+                 *              element?
+                 * @param array $attr What unique attributes does the element define?
+                 * @see HTMLPurifier_ElementDef:: for in-depth descriptions of these parameters.
+                 * @return \HTMLPurifier_ElementDef Created element definition object, so you
+                 *         can set advanced parameters
+                 */
+
+                /**
+                 * "customTags": {
+                 *   "tagName1": {
+                 *     "type": "string",
+                 *     "contents": "string", (Empty, Inline, Flow)
+                 *     "collection": "Common",
+                 *     "attributes": {
+                 *       "attrName1": "attrType",
+                 *       "attrName2": { "type": "Enum", "options": "item1,item2,item3" | ["item","item","item"] }
+                 *       "attrName2": { "type": "Number", "options": [bool, bool, bool] }
+                 *     }
+                 *   }
+                 * }
+                 */
+                $def->addElement(
+                    $tag, 
+                    $tagData['type'] ?: 'Inline', 
+                    $tagData['contents'] ?: 'Inline', 
+                    $tagData['collection'] ?: 'Common'
+                );
+
+                // custom attributes
+                foreach($tagData['attributes'] as $attrName => $attrData){
+
+                    /**
+                     * [{ name: '', attr: '', type: ''| {} }]
+                     * Adds a custom attribute to a pre-existing element
+                     * @note This is strictly convenience, and does not have a corresponding
+                     *       method in HTMLPurifier_HTMLModule
+                     * @param string $element_name Element name to add attribute to
+                     * @param string $attr_name Name of attribute
+                     * @param mixed $def Attribute definition, can be string or object, see
+                     *             HTMLPurifier_AttrTypes for details \HTMLPurifier\HTMLPurifier_AttrTypes
+                     */
+                    if(is_string($attrData)){
+                        // no config options given for attribute type (default)
+                        // Not implemented: in case # is present, the user might have defined it according to HTMLPurifier docs: i.e. Enum#_blank,_self,_target,_top
+                        $def->addAttribute($tag, $attrName, $attrData);
+                    }
+                    elseif(isset($attrData['type'])){
+                        /** 
+                         * note the types are case sensitive!
+                         * @see \HTMLPurifier_AttrTypes::class for options
+                         */
+                        if($attrData['type'] == 'Enum'){
+                            if(is_string($attrData['options'])){
+                                // we assume that the options are comma separated
+                                $options = explode(',', $attrData['options']);
+                            } else{
+                                $options = $attrData['options'];
+                            }
+                            $def->addAttribute($tag, $attrName, $attrData['type'], new \HTMLPurifier_AttrDef_Enum( $options ) );
+                        }
+                        if($attrData['type'] == 'Number'){
+                            $def->addAttribute($tag, $attrName, $attrData['type'], new \HTMLPurifier_AttrDef_Integer( 
+                                $attrData['options'][0] ?: true, // negative
+                                $attrData['options'][1] ?: true, // zero
+                                $attrData['options'][2] ?: true  // positive
+                            ));
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     /**
      * Initialize HTML Purifier with default settings
      */
@@ -266,6 +356,7 @@ private function getDefaultPurifier()
         $sanitizer->set('URI.AllowedSchemes', ['http' => true, 'https' => true, 'mailto' => true, 'tel' => true]);
         $sanitizer->set('AutoFormat.RemoveEmpty', true);
         $sanitizer->set('HTML.DefinitionID', 'html5-definitions');
+        $sanitizer->set('HTML.DefinitionRev', time()); 
 
         $cacheDirectory = sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'purifier';
         if (!is_dir($cacheDirectory)) {

EditorJS/ConfigLoader.php

@@ -10,6 +10,8 @@
 class ConfigLoader
 {
     public $tools = [];
+
+    public $customTags = [];
 
     /**
      * ConfigLoader constructor
@@ -26,6 +28,7 @@ public function __construct($configuration)
 
         $config = json_decode($configuration, true);
         $this->loadTools($config);
+        $this->loadCustomTags($config);
     }
 
     /**
@@ -61,4 +64,16 @@ private function loadTool($data)
     {
         return $data;
     }
+
+    /**
+     * Load custom HTML tags from configuration
+     */
+    private function loadCustomTags($config)
+    {
+        if (!isset($config['customTags'])) {
+            throw new EditorJSException('Custom HTML tags not found in configuration');
+        }
+
+        $this->customTags = $config['customTags'];
+    }
 }

README.md

@@ -274,8 +274,43 @@ Another configuration example: [/tests/samples/test-config.json](/tests/samples/
 
 If you connect a new Tool on the frontend-side, then you should create a configuration rule for that Tool to validate it on server-side.
 
+# Custom Tags and Attributes
+
+Sometimes you want to use tags or tag attributes for your tools that are not by default supported by [HTMLPurifier](https://github.com/ezyang/htmlpurifier). For example, by default HTMLPurifier filters out the `<mark>` tag, so we added support to this by default.
+You can add additional tags through the config:
+
+```json
+{ 
+  'tools': {
+    //
+  },
+  'customTags':{
+
+  }
+}
+```
+
+## Setting custom tags
+
+```json
+'customTags': {
+   'tagName1': {
+     'type': 'string',
+     'contents': 'string', (Empty, Inline, Flow)
+     'collection': 'Common',
+     'attributes': {
+       'attrName1': 'attrType',
+       'attrName2': { 'type': 'Enum', 'options': 'item1,item2,item3' | ['item','item','item'] }
+       'attrName3': { 'type': 'Number', 'options': [bool, bool, bool] }
+     }
+   }
+ }
+```
+
+...
+
 ## Repository 
-<a href="https://github.com/codex-editor/editorjs-php/">https://github.com/codex-editor/editorjs-php/</a>
+<a href='https://github.com/codex-editor/editorjs-php/'>https://github.com/codex-editor/editorjs-php/</a>
 
 
 ## About CodeX

composer.json

@@ -10,11 +10,11 @@
         }
     ],
     "require": {
-        "php": ">=5.6",
+        "php": ">=7.0",
         "ezyang/htmlpurifier": "^4.8"
     },
     "require-dev": {
-        "phpunit/phpunit": "5.4.*",
+        "phpunit/phpunit": ">=5.4",
         "friendsofphp/php-cs-fixer": "^2.13"
     },
     "autoload": {