Merge branch 'craft-3' of https://github.com/verbb/vizy into craft-4

# Conflicts: # CHANGELOG.md # composer.json # package-lock.json # package.json # src/fields/VizyField.php # src/marks/Link.php # src/web/assets/field/dist/js/main.js # src/web/assets/field/src/js/components/VizyInput.vue # src/web/assets/field/src/js/components/input/VizyBlock.vue # src/web/assets/field/src/js/components/input/VizyBlockFields.vue # src/web/assets/mix-manifest.json
verbb · Jul 2, 2022 · e3ba48a · e3ba48a
2 parents 515826f + 563cbc4
commit e3ba48a
Show file tree

Hide file tree

Showing 27 changed files with 2,248 additions and 2,269 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -55,6 +55,30 @@
 ### Removed
 - Remove `cleanDeltas()`, which is no longer needed in Craft 4.
 
+## 1.0.16 - 2022-07-02
+
+### Added
+- Add `isRoot` for Vue component top-level fields.
+
+### Changed
+- Update all tiptap dependancies to latest beta versions.
+- Exclude any falsey attributes for a node when rendering.
+- Lower debounce time for watched Vizy Block field changes.
+- Only clicking on the header of Vizy Blocks selects a block.
+
+### Fixed
+- Fix link nodes always including `target` and `rel` attributes.
+- Fix newly created Vizy blocks not having the correct namespace in some instances.
+- Fix JS not initializing correctly for complex Vizy fields and in combination with Neo/SuperTable/Matrix.
+- Fix an error where delta values for other fields was being stripped out when including a Vizy field.
+- Fix an error when saving nested Vizy fields with validation errors and blocks losing their content.
+- Fix unload warning when no content has been changed.
+- Fix Vizy Block field alignment of fields.
+- Fix selected state issues on nested Vizy fields and Vizy blocks, and add support for “Escape” key to remove selected Vizy Block.
+- Fix being unable to click properly between Vizy blocks to add a new node, and fix gap cursor alignment.
+- Fix an overlay issue for nested Vizy fields when picking Vizy blocks.
+- Fix multiple Redactor fields in a single Vizy block not working correctly.
+
 ## 1.0.15 - 2022-06-04
 
 ### Fixed

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,51 +8,51 @@
  "watch": "vite build --watch"
  },
  "devDependencies": {
- "@babel/eslint-parser": "^7.17.0",
+ "@babel/eslint-parser": "^7.18.2",
  "@pixelandtonic/craftui": "~0.3.8",
- "@rollup/plugin-node-resolve": "^13.2.1",
- "@vitejs/plugin-legacy": "^1.8.1",
- "@vitejs/plugin-vue": "^2.3.1",
- "autoprefixer": "^10.4.6",
+ "@rollup/plugin-node-resolve": "^13.3.0",
+ "@vitejs/plugin-legacy": "^1.8.2",
+ "@vitejs/plugin-vue": "^2.3.3",
+ "autoprefixer": "^10.4.7",
  "babel-eslint": "^10.1.0",
  "craftcms-sass": "^3.5.7",
- "eslint": "^8.14.0",
+ "eslint": "^8.19.0",
  "eslint-import-resolver-alias": "^1.1.2",
  "eslint-plugin-import": "^2.26.0",
- "eslint-plugin-vue": "^8.7.1",
+ "eslint-plugin-vue": "^9.1.1",
  "lodash-es": "^4.17.21",
- "postcss": "^8.4.13",
+ "postcss": "^8.4.14",
  "postcss-color-function": "^4.1.0",
  "resolve-url-loader": "^5.0.0",
  "rollup-plugin-analyzer": "^4.0.0",
- "sass": "^1.51.0",
- "vite": "2.9.6",
- "vite-plugin-eslint": "^1.6.0"
+ "sass": "^1.53.0",
+ "vite": "2.9.13",
+ "vite-plugin-eslint": "^1.6.1"
  },
  "dependencies": {
  "@fortawesome/fontawesome-svg-core": "^6.1.1",
  "@fortawesome/free-regular-svg-icons": "^6.1.1",
  "@fortawesome/free-solid-svg-icons": "^6.1.1",
  "@fortawesome/vue-fontawesome": "^3.0.0-5",
- "@tiptap/core": "^2.0.0-beta.175",
- "@tiptap/extension-floating-menu": "^2.0.0-beta.51",
- "@tiptap/extension-focus": "^2.0.0-beta.40",
- "@tiptap/extension-highlight": "^2.0.0-beta.33",
- "@tiptap/extension-image": "^2.0.0-beta.27",
- "@tiptap/extension-link": "^2.0.0-beta.37",
- "@tiptap/extension-subscript": "^2.0.0-beta.10",
- "@tiptap/extension-superscript": "^2.0.0-beta.10",
- "@tiptap/extension-text-align": "^2.0.0-beta.29",
- "@tiptap/extension-underline": "^2.0.0-beta.23",
- "@tiptap/starter-kit": "^2.0.0-beta.184",
- "@tiptap/vue-3": "^2.0.0-beta.91",
- "codemirror-editor-vue3": "^2.0.6",
- "floating-vue": "^2.0.0-beta.16",
- "js-beautify": "^1.14.3",
- "qs": "^6.10.3",
+ "@tiptap/core": "^2.0.0-beta.181",
+ "@tiptap/extension-floating-menu": "^2.0.0-beta.56",
+ "@tiptap/extension-focus": "^2.0.0-beta.45",
+ "@tiptap/extension-highlight": "^2.0.0-beta.35",
+ "@tiptap/extension-image": "^2.0.0-beta.30",
+ "@tiptap/extension-link": "^2.0.0-beta.43",
+ "@tiptap/extension-subscript": "^2.0.0-beta.13",
+ "@tiptap/extension-superscript": "^2.0.0-beta.13",
+ "@tiptap/extension-text-align": "^2.0.0-beta.31",
+ "@tiptap/extension-underline": "^2.0.0-beta.25",
+ "@tiptap/starter-kit": "^2.0.0-beta.190",
+ "@tiptap/vue-3": "^2.0.0-beta.96",
+ "codemirror-editor-vue3": "^2.1.7",
+ "floating-vue": "^2.0.0-beta.17",
+ "js-beautify": "^1.14.4",
+ "qs": "^6.11.0",
  "tippy.js": "^6.3.7",
  "vite-plugin-compression": "^0.5.1",
- "vue": "^3.2.33",
+ "vue": "^3.2.37",
  "vue-autosuggest": "^2.2.0",
  "vue-final-modal": "^3.4.3",
  "vue-mitt": "^0.0.1"

diff --git a/src/base/Mark.php b/src/base/Mark.php
@@ -59,7 +59,7 @@ public function getTag(): array
  return [
  [
  'tag' => $this->tagName,
- 'attrs' => $this->attrs,
+ 'attrs' => array_filter($this->attrs),
  ],
  ];
  }

diff --git a/src/fields/VizyField.php b/src/fields/VizyField.php
@@ -197,17 +197,24 @@ public function getInputHtml(mixed $value, ?ElementInterface $element = null): s
  $defaultTransform = $transform->handle;
  }
 
- $placeholderKey = StringHelper::randomString(10);
+ // Cache the placeholder key for the fields' JS. Because we're caching the block type HTML/JS
+ // we also need to cache the placeholder key to match that cached data.
+ $placeholderKey = Vizy::$plugin->getCache()->getOrSet($this->getCacheKey('placeholderKey'), function() {
+ return StringHelper::randomString(10);
+ });
 
  $settings = [
- 'blockGroups' => $this->_getBlockGroupsForInput($value, $placeholderKey, $element),
+ // The order of `blocks` and `blockGroups` is important here, to ensure that the blocks
+ // are rendered with content, where `blockGroups` is just the template for new blocks.
  'blocks' => $this->_getBlocksForInput($value, $placeholderKey, $element),
+ 'blockGroups' => $this->_getBlockGroupsForInput($value, $placeholderKey, $element),
  'vizyConfig' => $this->_getVizyConfig(),
  'defaultTransform' => $defaultTransform,
  'elementSiteId' => $site->id,
  'showAllUploaders' => $this->showUnpermittedFiles,
  'placeholderKey' => $placeholderKey,
  'fieldHandle' => $this->handle,
+ 'isRoot' => true,
  ];
 
  // Only include some options if we need them - for performance
@@ -219,6 +226,11 @@ public function getInputHtml(mixed $value, ?ElementInterface $element = null): s
  $settings['transforms'] = $this->_getTransforms();
  }
 
+ // Let the field know if this is the root field for nested fields
+ if ($element instanceof BlockElement) {
+ $settings['isRoot'] = false;
+ }
+
  // No need to output JS for any nested fields, all settings are rendered in the template
  // as Vue takes over and processes the props.
  // if (!$element instanceof BlockElement) {
@@ -557,6 +569,11 @@ protected function searchKeywords(mixed $value, ElementInterface $element): stri
  // Private Methods
  // =========================================================================
 
+ private function getCacheKey($key)
+ {
+ return $this->id . '-' . $this->handle . '-' . $key;
+ }
+
  private function _getNestedValues($value, $key, &$items = []): array
  {
  foreach ($value as $k => $v) {
@@ -600,75 +617,72 @@ private function _getBlockGroupsForSettings(): array
 
  private function _getBlockGroupsForInput($value, $placeholderKey, ElementInterface $element = null): array
  {
- // Get from the cache, if we've already prepped this field's block groups
- if ($blockGroups = Vizy::$plugin->getCache()->getBlockGroupsForInput($this->handle)) {
- return $blockGroups;
- }
+ // Get from the cache, if we've already prepped this field's block groups.
+ // The blocks HTML/JS is unique to this fields' ID and handle. Even if used multiple
+ // times in an element, or nested, we only need to generate this once.
+ return Vizy::$plugin->getCache()->getOrSet($this->getCacheKey('blockGroups'), function() use ($value, $placeholderKey, $element) {
+ $view = Craft::$app->getView();
 
- $view = Craft::$app->getView();
+  $data = $this->fieldData;
 
- $data = $this->fieldData;
+ foreach ($data as $groupKey => $group) {
+ $blocks = $group['blockTypes'] ?? [];
 
- foreach ($data as $groupKey => $group) {
- $blocks = $group['blockTypes'] ?? [];
+ foreach ($blocks as $blockTypeKey => $blockTypeData) {
+ // Skip any disabled blocktypes
+ $enabled = $blockTypeData['enabled'] ?? true;
 
- foreach ($blocks as $blockTypeKey => $blockTypeData) {
- // Skip any disabled blocktypes
- $enabled = $blockTypeData['enabled'] ?? true;
+  if (!$enabled) {
+  continue;
+  }
 
- if (!$enabled) {
- continue;
- }
+ $blockType = new BlockType($blockTypeData);
 
- $blockType = new BlockType($blockTypeData);
+ $fieldLayout = $blockType->getFieldLayout();
+
+ if (!$fieldLayout) {
+ // Discard the blocktype
+ unset($data[$groupKey]['blockTypes'][$blockTypeKey]);
 
- $fieldLayout = $blockType->getFieldLayout();
+ continue;
+ }
 
- if (!$fieldLayout) {
- // Discard the blocktype
- unset($data[$groupKey]['blockTypes'][$blockTypeKey]);
+ $blockTypeArray = $blockType->toArray();
 
- continue;
- }
+ $view->startJsBuffer();
 
- $blockTypeArray = $blockType->toArray();
+ // Create a fake element with the same fieldtype as our block
+ $blockElement = new BlockElement();
+ $blockElement->setFieldLayout($fieldLayout);
+ $blockElement->setOwner($element);
 
- $view->startJsBuffer();
+ $originalNamespace = $view->getNamespace();
+ $namespace = $view->namespaceInputName($this->handle . "[blocks][__VIZY_BLOCK_{$placeholderKey}__]", $originalNamespace);
+ $view->setNamespace($namespace);
 
- // Create a fake element with the same fieldtype as our block
- $blockElement = new BlockElement();
- $blockElement->setFieldLayout($fieldLayout);
- $blockElement->setOwner($element);
+ $form = $fieldLayout->createForm($blockElement);
+ $blockTypeArray['tabs'] = $form->getTabMenu();
+ $blockTypeArray['fieldsHtml'] = $view->namespaceInputs($form->render());
 
- $originalNamespace = $view->getNamespace();
- $namespace = $view->namespaceInputName($this->handle . "[blocks][__BLOCK_TYPE_{$placeholderKey}__]", $originalNamespace);
- $view->setNamespace($namespace);
+ $footHtml = $view->clearJsBuffer(false);
 
- $form = $fieldLayout->createForm($blockElement);
- $blockTypeArray['tabs'] = $form->getTabMenu();
- $blockTypeArray['fieldsHtml'] = $view->namespaceInputs($form->render());
+ $view->setNamespace($originalNamespace);
 
- $footHtml = $view->clearJsBuffer(false);
+ if ($footHtml) {
+ $footHtml = '<script id="script-__VIZY_BLOCK_' . $placeholderKey . '__">' . $footHtml . '</script>';
+ }
 
- $view->setNamespace($originalNamespace);
+  $blockTypeArray['footHtml'] = $footHtml;
 
- if ($footHtml) {
- $footHtml = '<script id="script-__BLOCK_TYPE_' . $placeholderKey . '__">' . $footHtml . '</script>';
+ $data[$groupKey]['blockTypes'][$blockTypeKey] = $blockTypeArray;
  }
 
- $blockTypeArray['footHtml'] = $footHtml;
-
- $data[$groupKey]['blockTypes'][$blockTypeKey] = $blockTypeArray;
+ // Ensure we reset array indexes to play nicely with JS
+ $data[$groupKey]['blockTypes'] = array_values($data[$groupKey]['blockTypes']);
  }
 
- // Ensure we reset array indexes to play nicely with JS
- $data[$groupKey]['blockTypes'] = array_values($data[$groupKey]['blockTypes']);
- }
-
- // Store this in a cache for performance
- Vizy::$plugin->getCache()->setBlockGroupsForInput($this->handle, $data);
-
- return $data;
+ return $data;
+ });
  }
 
  private function _getBlocksForInput($value, $placeholderKey, ElementInterface $element = null): array
@@ -693,7 +707,7 @@ private function _getBlocksForInput($value, $placeholderKey, ElementInterface $e
  $blockElement = $block->getBlockElement($element);
 
  $originalNamespace = $view->getNamespace();
- $namespace = $view->namespaceInputName($this->handle . "[blocks][{$blockId}]", $originalNamespace);
+ $namespace = $view->namespaceInputName($this->handle . "[blocks][__VIZY_BLOCK_{$placeholderKey}__]", $originalNamespace);
  $view->setNamespace($namespace);
 
  $fieldsHtml = $view->namespaceInputs($fieldLayout->createForm($blockElement)->render());
@@ -702,7 +716,7 @@ private function _getBlocksForInput($value, $placeholderKey, ElementInterface $e
  $view->setNamespace($originalNamespace);
 
  if ($footHtml) {
- $footHtml = '<script id="script-' . $blockId . '">' . $footHtml . '</script>';
+ $footHtml = '<script id="script-__VIZY_BLOCK_' . $placeholderKey . '__">' . $footHtml . '</script>';
  }
 
  $blocks[] = [

diff --git a/src/marks/Link.php b/src/marks/Link.php
@@ -18,8 +18,11 @@ class Link extends Mark
 
  public function getTag(): array
  {
+ // Reset
+ $this->attrs['rel'] = null;
+
  if (isset($this->attrs['target']) && $this->attrs['target'] === '_blank') {
- $this->attrs['rel'] = 'noopener noreferrer nofollow';
+ $this->attrs['rel'] = 'noopener noreferrer';
  }
 
  // Parse the link URL for ref tags

diff --git a/src/services/Cache.php b/src/services/Cache.php
@@ -9,20 +9,33 @@ class Cache extends Component
  // Properties
  // =========================================================================
 
- private $_blockGroupsForInput = [];
+ private $_cacheData = [];
 
 
  // Public Methods
  // =========================================================================
 
- public function getBlockGroupsForInput($key)
+ public function get($key)
  {
- return $this->_blockGroupsForInput[$key] ?? [];
+ return $this->_cacheData[$key] ?? false;
  }
 
- public function setBlockGroupsForInput($key, $value)
+ public function set($key, $value)
  {
- $this->_blockGroupsForInput[$key] = $value;
+ $this->_cacheData[$key] = $value;
+ }
+
+ public function getOrSet($key, $callable)
+ {
+ if (($value = $this->get($key)) !== false) {
+ return $value;
+ }
+
+ $value = call_user_func($callable, $this);
+
+ $this->set($key, $value);
+
+ return $value;
  }
 
 }
diff --git a/src/translations/en/vizy.php b/src/translations/en/vizy.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+
+];
diff --git a/src/web/assets/field/dist/assets/vizy.36391e1c.css b/src/web/assets/field/dist/assets/vizy.36391e1c.css
diff --git a/src/web/assets/field/dist/assets/vizy.36391e1c.css.gz b/src/web/assets/field/dist/assets/vizy.36391e1c.css.gz