+
diff --git a/resources/js/components/fieldtypes/RevealerFieldtype.vue b/resources/js/components/fieldtypes/RevealerFieldtype.vue
index 4f802f4779..830c1a4cc4 100644
--- a/resources/js/components/fieldtypes/RevealerFieldtype.vue
+++ b/resources/js/components/fieldtypes/RevealerFieldtype.vue
@@ -4,7 +4,7 @@
-
+
@@ -13,7 +13,7 @@
@click="buttonReveal"
class="btn"
:disabled="isReadOnly"
- :v-tooltip="config.instructions"
+ :v-tooltip="__(config.instructions)"
v-text="config.input_label || __('Show Fields')" />
@@ -54,7 +54,9 @@ export default {
watch: {
fieldPath(fieldPath, oldFieldPath) {
this.$store.commit(`publish/${this.storeName}/unsetRevealerField`, oldFieldPath);
- this.$store.commit(`publish/${this.storeName}/setRevealerField`, fieldPath);
+ this.$nextTick(() => {
+ this.$store.commit(`publish/${this.storeName}/setRevealerField`, fieldPath);
+ });
}
},
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 4f87c306f4..9294730f42 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -2,6 +2,7 @@
- {{ option.label }}
+ {{ __(option.label) }}
diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue
index 9f6455d86e..309fcd3c84 100644
--- a/resources/js/components/fieldtypes/SlugFieldtype.vue
+++ b/resources/js/components/fieldtypes/SlugFieldtype.vue
@@ -14,6 +14,7 @@
:isReadOnly="isReadOnly"
:append="config.show_regenerate && value"
:name="slug"
+ :id="fieldId"
@focus="$emit('focus')"
@blur="$emit('blur')"
>
@@ -29,6 +30,7 @@
diff --git a/resources/js/components/fieldtypes/TextareaFieldtype.vue b/resources/js/components/fieldtypes/TextareaFieldtype.vue
index 9f8832b9f2..954176909a 100644
--- a/resources/js/components/fieldtypes/TextareaFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextareaFieldtype.vue
@@ -1,9 +1,10 @@
diff --git a/resources/js/components/fieldtypes/assets/Asset.js b/resources/js/components/fieldtypes/assets/Asset.js
index 1038a36dc5..c823cd57d0 100644
--- a/resources/js/components/fieldtypes/assets/Asset.js
+++ b/resources/js/components/fieldtypes/assets/Asset.js
@@ -77,6 +77,10 @@ export default {
},
open() {
+ if (! this.asset.url) {
+ return this.download();
+ }
+
window.open(this.asset.url, '_blank');
},
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 557248a89f..d67e005297 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -328,11 +328,11 @@ export default {
},
replicatorPreview() {
- return _.map(this.assets, (asset) => {
+ return replicatorPreviewHtml(_.map(this.assets, (asset) => {
return (asset.isImage || asset.isSvg) ?
`
`
: asset.basename;
- }).join(', ');
+ }).join(', '));
},
showPicker() {
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 1b2a59c028..e9873150dd 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -58,7 +58,7 @@
:should-show="shouldShowSetButton"
:is-showing="showAddSetButton"
v-if="editor"
- v-slot="{ x, y }"
+ v-slot="{ y }"
@shown="showAddSetButton = true"
@hidden="showAddSetButton = false"
>
@@ -72,7 +72,7 @@
-
@@ -174,7 +173,7 @@ export default {
collapsed: this.meta.collapsed,
previews: this.meta.previews,
mounted: false,
- invalid: false,
+ initError: null,
pageHeader: null,
escBinding: null,
showAddSetButton: false,
@@ -216,6 +215,24 @@ export default {
}
},
+ characterAndWordCountText() {
+ const showWordCount = this.config.word_count;
+ const wordCount = this.editor.storage.characterCount.words();
+ const wordCountText = `${__n(':count word|:count words', wordCount)}`;
+ const charLimit = this.config.character_limit;
+ const showCharLimit = charLimit > 0;
+ const charCount = this.editor.storage.characterCount.characters();
+
+ // If both are enabled, show a more verbose combined string.
+ if (showCharLimit && showWordCount) {
+ return `${wordCountText}, ${__(':count/:total characters', { count: charCount, total: charLimit })}`;
+ }
+
+ // Otherwise show one or the other.
+ if (showCharLimit) return `${charCount}/${charLimit}`;
+ if (showWordCount) return wordCountText;
+ },
+
isFirstCreation() {
return !this.$config.get('bard.meta').hasOwnProperty(this.id);
},
@@ -278,7 +295,7 @@ export default {
} else if (node.type === 'set') {
const handle = node.attrs.values.type;
const set = this.setConfigs.find(set => set.handle === handle);
- text += ` [${set ? set.display : handle}]`;
+ text += ` [${__(set ? set.display : handle)}]`;
}
if (text.length > 150) {
break;
@@ -327,6 +344,12 @@ export default {
this.pageHeader = document.querySelector('.global-header');
this.$store.commit(`publish/${this.storeName}/setFieldSubmitsJson`, this.fieldPathPrefix || this.handle);
+
+ this.$nextTick(() => {
+ document.querySelector(`label[for="${this.fieldId}"]`).addEventListener('click', () => {
+ this.editor.commands.focus();
+ });
+ });
},
beforeDestroy() {
@@ -386,7 +409,9 @@ export default {
fieldPathPrefix(fieldPathPrefix, oldFieldPathPrefix) {
this.$store.commit(`publish/${this.storeName}/unsetFieldSubmitsJson`, oldFieldPathPrefix);
- this.$store.commit(`publish/${this.storeName}/setFieldSubmitsJson`, fieldPathPrefix);
+ this.$nextTick(() => {
+ this.$store.commit(`publish/${this.storeName}/setFieldSubmitsJson`, fieldPathPrefix);
+ });
},
fullScreenMode() {
@@ -471,8 +496,8 @@ export default {
const { $anchor, empty } = selection;
const isRootDepth = $anchor.depth === 1;
const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent;
-
- const isActive = view.hasFocus() && empty && isRootDepth && isEmptyTextBlock;
+ const isAroundInlineImage = state.selection.$to.nodeBefore?.type.name === 'image' || state.selection.$to.nodeAfter?.type.name === 'image'
+ const isActive = view.hasFocus() && empty && isRootDepth && isEmptyTextBlock && !isAroundInlineImage;
return this.setConfigs.length && (this.config.always_show_set_button || isActive);
},
@@ -606,13 +631,39 @@ export default {
try {
state.schema.nodeFromJSON(content);
} catch (error) {
- this.invalid = true;
+ const invalidError = this.invalidError(error);
+ if (invalidError) {
+ this.initError = invalidError;
+ } else {
+ this.initError = __('Something went wrong');
+ console.error(error);
+ }
}
}
}
});
},
+ invalidError(error) {
+ const messages = {
+ 'Invalid text node in JSON': 'Invalid content, text values must be strings',
+ 'Empty text nodes are not allowed': 'Invalid content, text values cannot be empty',
+ };
+
+ if (messages[error.message]) {
+ return __(messages[error.message]);
+ }
+
+ let match;
+ if (match = error.message.match(/^(?:There is no|Unknown) (?:node|mark) type:? (\w*)(?: in this schema)?$/)) {
+ if (match[1]) {
+ return __('Invalid content, :type button/extension is not enabled', { type: match[1] });
+ } else {
+ return __('Invalid content, nodes and marks must have a type');
+ }
+ }
+ },
+
valueToContent(value) {
// A json string is passed from PHP since that's what's submitted.
value = JSON.parse(value);
@@ -623,14 +674,25 @@ export default {
},
getExtensions() {
+ let modeExts = this.inputIsInline ? [DocumentInline] : [DocumentBlock, HardBreak];
+ if (this.config.inline === 'break') {
+ modeExts.push(HardBreak.extend({
+ addKeyboardShortcuts() {
+ return {
+ ...this.parent?.(),
+ 'Enter': () => this.editor.commands.setHardBreak(),
+ }
+ },
+ }));
+ }
let exts = [
CharacterCount.configure({ limit: this.config.character_limit }),
- ...(this.inputIsInline ? [DocumentInline] : [DocumentBlock, HardBreak]),
+ ...modeExts,
Dropcursor,
Gapcursor,
History,
Paragraph,
- Placeholder.configure({ placeholder: this.config.placeholder }),
+ Placeholder.configure({ placeholder: __(this.config.placeholder) }),
Set.configure({ bard: this }),
Text
];
@@ -667,12 +729,15 @@ export default {
if (btns.includes('h6')) levels.push(6);
if (levels.length) exts.push(Heading.configure({ levels }));
+ let alignmentTypes = ['paragraph'];
+ if (levels.length) alignmentTypes.push('heading');
+
let alignments = [];
if (btns.includes('alignleft')) alignments.push('left');
if (btns.includes('aligncenter')) alignments.push('center');
if (btns.includes('alignright')) alignments.push('right');
if (btns.includes('alignjustify')) alignments.push('justify');
- if (alignments.length) exts.push(TextAlign.configure({ types: ['heading', 'paragraph'], alignments }));
+ if (alignments.length) exts.push(TextAlign.configure({ types: alignmentTypes, alignments }));
if (btns.includes('table')) {
exts.push(
diff --git a/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js b/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js
index d629d57fbf..0000aae422 100644
--- a/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js
+++ b/resources/js/components/fieldtypes/bard/FloatingMenuPlugin.js
@@ -38,9 +38,8 @@ class FloatingMenuView {
// The dimension from posToDOMRect are relative to the window.
// But since bard is inside a @container which creates a new stacking
// context, we need the dimensions relative to the bard editor.
- const { top: selectionTop, left: selectionLeft } = posToDOMRect(view, from, to);
- const { top: editorTop, left: editorLeft } = this.editor.options.element.getBoundingClientRect();
- this.vm.x = Math.round(selectionLeft-editorLeft);
+ const { top: selectionTop } = posToDOMRect(view, from, to);
+ const { top: editorTop } = this.editor.options.element.getBoundingClientRect();
this.vm.y = Math.round(selectionTop-editorTop);
this.show();
diff --git a/resources/js/components/fieldtypes/bard/Image.js b/resources/js/components/fieldtypes/bard/Image.js
index d7fd843d98..1bc6f631b7 100644
--- a/resources/js/components/fieldtypes/bard/Image.js
+++ b/resources/js/components/fieldtypes/bard/Image.js
@@ -16,7 +16,7 @@ export const Image = Node.create({
draggable: true,
- selectable: false,
+ selectable: true,
addAttributes() {
return {
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index dc6b93ca94..50a20cb03e 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -1,33 +1,44 @@
-
-
-
-
-
![]()
-
-
-
-
-
-
-
+
+
+
+
![]()
-
-
diff --git a/resources/js/components/fieldtypes/bard/Set.js b/resources/js/components/fieldtypes/bard/Set.js
index 126f7e214c..d9eb491f93 100644
--- a/resources/js/components/fieldtypes/bard/Set.js
+++ b/resources/js/components/fieldtypes/bard/Set.js
@@ -1,6 +1,7 @@
import { Node } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-2'
import SetComponent from './Set.vue';
+import { TextSelection } from '@tiptap/pm/state';
export const Set = Node.create({
@@ -54,7 +55,10 @@ export const Set = Node.create({
const { selection } = tr;
const node = this.type.create(attrs);
if (dispatch) {
- const transaction = tr.insert(selection.$cursor.pos - 1, node);
+ const transaction = selection instanceof TextSelection
+ ? tr.insert(selection.$cursor.pos - 1, node)
+ : tr.insert(selection.$head.pos, node);
+
dispatch(transaction);
}
},
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 2b998aa28f..373bebde97 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -8,14 +8,11 @@