Skip to content

Commit

Permalink
Merge pull request #2080 from area17/1741-3x-tiptap-link
Browse files Browse the repository at this point in the history 
[3.x] tiptap 2 + custom link modal
  • Loading branch information
@haringsrob
haringsrob authored Jan 24, 2023
2 parents ba73c35 + fe35fb8 commit 9f52382
Show file tree
Hide file tree
Showing 19 changed files with 1,440 additions and 546 deletions.
9 changes: 6 additions & 3 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ module.exports = {
},
extends: ['plugin:vue/essential', '@vue/standard', 'prettier'],
rules: {
'no-unmodified-loop-condition': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
'no-unused-vars': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
'no-unreachable': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
// indent
indent: ['error', 2, { SwitchCase: 1 }],
'vue/script-indent': [
'error',
process.env.NODE_ENV === 'production' ? 'error' : 'warn',
2,
{
baseIndent: 1,
Expand All @@ -27,15 +30,15 @@ module.exports = {
'no-console':
process.env.NODE_ENV === 'production'
? ['error', { allow: ['error'] }]
: 'off'
: 'warn'
},
overrides: [
{
files: ['*.vue'],
rules: {
indent: 'off',
'vue/script-indent': [
'error',
process.env.NODE_ENV === 'production' ? 'error' : 'warn',
2,
{
baseIndent: 1,
Expand Down
73 changes: 34 additions & 39 deletions docs/content/1_documentation/4_form-fields/wysiwyg.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
```php
Wysiwyg::make()
->name('case_study')
->toolbarOptions(['list-ordered', 'list-unordered'])
->toolbarOptions([ [ 'header' => [1, 2, false] ], 'ordered', 'bullet' ])
->maxLength(200)
->note('Some note')
```
Expand All @@ -20,7 +20,6 @@ Wysiwyg::make()
<x-twill::wysiwyg
name="case_study"
:label="twillTrans('Case study text')"
:toolbar-options="['list-ordered', 'list-unordered']"
:placeholder="twillTrans('Case study placeholder')"
:maxlength="200"
:note="twillTrans('Help text')"
Expand All @@ -29,7 +28,7 @@ Wysiwyg::make()
<x-twill::wysiwyg
name="case_study"
:label="twillTrans('Case study text')"
:toolbar-options="[ [ 'header' => [1, 2, false] ], 'list-ordered', 'list-unordered', [ 'indent' => '-1'], [ 'indent' => '+1' ] ]"
:toolbar-options="[ [ 'header' => [1, 2, false] ], 'ordered', 'bullet' ]"
:placeholder="twillTrans('Case study placeholder')"
:edit-source="true"
:translated="true"
Expand All @@ -45,7 +44,6 @@ Wysiwyg::make()
@formField('wysiwyg', [
'name' => 'case_study',
'label' => 'Case study text',
'toolbarOptions' => ['list-ordered', 'list-unordered'],
'placeholder' => 'Case study text',
'maxlength' => 200,
'note' => 'Hint message',
Expand All @@ -54,7 +52,7 @@ Wysiwyg::make()
@formField('wysiwyg', [
'name' => 'case_study',
'label' => 'Case study text',
'toolbarOptions' => [ [ 'header' => [1, 2, false] ], 'list-ordered', 'list-unordered', [ 'indent' => '-1'], [ 'indent' => '+1' ] ],
'toolbarOptions' => [ [ 'header' => [1, 2, false] ],
'placeholder' => 'Case study text',
'maxlength' => 200,
'editSource' => true,
Expand All @@ -65,32 +63,29 @@ Wysiwyg::make()
:::#tab:::
:::#tabs:::

By default, the WYSIWYG field is based on [Quill](https://quilljs.com/).
By default, the WYSIWYG field is based on [Tiptap](https://tiptap.dev/).

You can add all [toolbar options](https://quilljs.com/docs/modules/toolbar/) from Quill with the `toolbarOptions` key.
You can configure the toolbar if needed.

For example, this configuration will render a `wysiwyg` field with almost all features from Quill and Snow theme.
For example, this configuration will render the *default* toolbar.

```blade
@php
$wysiwygOptions = [
['header' => [2, 3, 4, 5, 6, false]],
'bold',
'italic',
'underline',
'strike',
["script" => "super"],
["script" => "sub"],
"blockquote",
"code-block",
['list' => 'ordered'],
['list' => 'bullet'],
['indent' => '-1'],
['indent' => '+1'],
["align" => []],
["direction" => "rtl"],
'link',
"clean",
['header' => [2, 3, 4, 5, 6, false]],
'bold',
'italic',
'underline',
'strike',
'blockquote',
"code-block",
'ordered',
'bullet',
'hr',
'code',
'link',
'clean',
'table',
];
@endphp
Expand All @@ -110,20 +105,20 @@ image module is not integrated with Twill's media library. It outputs the base64
It is not a recommended way of using and storing images, prefer using one or multiple `medias` form fields or blocks
fields for flexible content. This will give you greater control over your frontend output.

| Option | Description | Type/values | Default value |
|:---------------|:-------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------|:----------------------------------------|
| name | Name of the field | string | |
| label | Label of the field | string | |
| type | Type of wysiwyg field | quill<br/>tiptap | quill |
| toolbarOptions | Array of options/tools that will be displayed in the editor | [Quill options](https://quilljs.com/docs/modules/toolbar/) | bold<br/>italic<br />underline<br/>link |
| editSource | Displays a button to view source code | boolean | false |
| hideCounter | Hide the character counter displayed at the bottom | boolean | false |
| limitHeight | Limit the editor height from growing beyond the viewport | boolean | false |
| translated | Defines if the field is translatable | boolean | false |
| maxlength | Max character count of the field | integer | 255 |
| note | Hint message displayed above the field | string | |
| placeholder | Text displayed as a placeholder in the field | string | |
| required | Displays an indicator that this field is required<br/>A backend validation rule is required to prevent users from saving | boolean | false |
| Option | Description | Type/values | Default value |
|:---------------|:-------------------------------------------------------------------------------------------------------------------------|:-----------------|:--------------|
| name | Name of the field | string | |
| label | Label of the field | string | |
| type | Type of wysiwyg field | quill<br/>tiptap | tiptap |
| toolbarOptions | Array of options/tools that will be displayed in the editor | | See above |
| editSource | Displays a button to view source code | boolean | false |
| hideCounter | Hide the character counter displayed at the bottom | boolean | false |
| limitHeight | Limit the editor height from growing beyond the viewport | boolean | false |
| translated | Defines if the field is translatable | boolean | false |
| maxlength | Max character count of the field | integer | 255 |
| note | Hint message displayed above the field | string | |
| placeholder | Text displayed as a placeholder in the field | string | |
| required | Displays an indicator that this field is required<br/>A backend validation rule is required to prevent users from saving | boolean | false |

A migration to save a `wysiwyg` field would be:

Expand Down
5 changes: 5 additions & 0 deletions frontend/icons-wysiwyg/wysiwyg_unlink.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 28 additions & 21 deletions frontend/js/components/Checkbox.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<template>
<span class="checkbox">
<input type="checkbox" class="checkbox__input" :class="checkboxClasses" :value="value" :name="name" :id="uniqId" :disabled="disabled" v-model="checkedValue">
<label class="checkbox__label" :for="uniqId">{{ label }} <span class="checkbox__icon"><span v-svg symbol="check"></span></span></label>
<input type="checkbox" :key="uniqId" class="checkbox__input" :class="checkboxClasses" :value="value" :name="name"
:id="uniqId" :disabled="disabled" v-model="checkedValue">
<label class="checkbox__label" :for="uniqId">{{ label }}
<span class="checkbox__icon">
<span v-svg symbol="check"></span>
</span>
</label>
</span>
</template>

Expand All @@ -16,7 +21,9 @@
default: ''
},
initialValue: {
default: function () { return [] }
default: function () {
return []
}
},
name: {
type: String,
Expand Down Expand Up @@ -59,8 +66,8 @@
<style lang="scss" scoped>
.checkbox {
color:$color__text;
min-width:30px;
color: $color__text;
min-width: 30px;
}
.checkbox__input {
Expand All @@ -73,7 +80,7 @@
border: 0 none;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
opacity:0;
opacity: 0;
}
.checkbox__label {
Expand Down Expand Up @@ -103,17 +110,17 @@
.checkbox__icon {
background-color: $color__fborder--active;
color:$color__background;
color: $color__background;
opacity: 0;
}
.checkbox__icon .icon {
color:$color__background;
color: $color__background;
top: 2px;
position: relative;
display: block;
margin-left:auto;
margin-right:auto;
margin-left: auto;
margin-right: auto;
}
.checkbox__input:focus + .checkbox__label::before,
Expand All @@ -122,9 +129,9 @@
}
.checkbox__label:hover,
.checkbox__input:hover + .checkbox__label,
.checkbox__input:hover + .checkbox__label,
.checkbox__input:checked + .checkbox__label {
color:$color__text;
color: $color__text;
}
.checkbox__input:checked + .checkbox__label .checkbox__icon {
Expand All @@ -144,20 +151,20 @@
/* Green variant */
.checkbox__input--bold + .checkbox__label .checkbox__icon {
background-color:$color__publish
background-color: $color__publish
}
/* Minus variant (for Bulk Edit) */
.checkbox--minus {
.checkbox__label::after {
content:'';
display:block;
width:9px;
height:2px;
background-color:$color__fborder--active;
position:absolute;
left:2px + 15px - 14px;
top:8px;
content: '';
display: block;
width: 9px;
height: 2px;
background-color: $color__fborder--active;
position: absolute;
left: 2px + 15px - 14px;
top: 8px;
}
.checkbox__input:checked + .checkbox__label .checkbox__icon {
Expand Down
30 changes: 22 additions & 8 deletions frontend/js/components/StandaloneBrowser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,13 @@
},
endpoint: {
type: Object,
required: true
required: false,
default: null
},
endpointMultiple: {
type: Array,
required: false,
default: null
},
max: {
type: Number,
Expand All @@ -93,12 +99,13 @@
endpointName: null,
browserTitle: 'Select', // @todo
browserNote: null,
currentSource: null,
selected: []
}
},
computed: {
currentEndpoint () {
return this.endpoints.find(endpoint => endpoint.value === this.endpoint.value)
return this.endpoints.find(endpoint => endpoint.value === this.currentSource)
},
multiSources () {
return this.endpoints.length > 1
Expand Down Expand Up @@ -186,7 +193,7 @@
const form = this.$refs.form
const formdata = this.getFormData(form)
this.$http.get(this.endpoint.value, { params: formdata }).then((resp) => {
this.$http.get(this.currentEndpoint.value, { params: formdata }).then((resp) => {
// add items here
if (hardReload) {
this.clearFullItems()
Expand Down Expand Up @@ -229,16 +236,23 @@
this.closeModal()
},
changeBrowserSource (source) {
// @todo: Not supported for now.
// this.$store.commit(BROWSER.UPDATE_BROWSER_ENDPOINT, source)
this.currentSource = source.value;
this.reloadList(true)
}
},
mounted () {
this.openModal();
this.endpoints = [
this.endpoint
]
if (this.endpointMultiple) {
this.endpoints = this.endpointMultiple
}
else {
this.endpoints = [
this.endpoint
]
}
this.currentSource = this.endpoints[0].value;
// bind scroll on the feed
this.reloadList()
}
Expand Down
1 change: 1 addition & 0 deletions frontend/js/components/Textfield.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,7 @@
this.checkFieldValidity(event.target)
this.$emit('change', newValue)
this.$emit('input', newValue)
this.allowSubmit()
}, 250),
Expand Down
Loading

0 comments on commit 9f52382

Please sign in to comment.