Skip to content

Commit

Permalink
Readonly area
Browse files Browse the repository at this point in the history
  • Loading branch information
@Skrikjo
Skrikjo committed Jul 26, 2019
1 parent ac1d8f3 commit 01ee44d
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 32 deletions.
11 changes: 11 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,17 @@ After tabstops are set, you can use them in editor. when you are focused in edit
</script>
```

### Readonly area
To make part of text read only, select text and click `lock` icon in toolbar. Now text is not editable.
To make text editable egain, select it and clicl `lock` button again.

Limitations of readonly functionality:
* Readonly is not working in `code` block
* Readonly is a inline element(like span), so it is still possible to put cursore after the area and add some text
* Readonly area can be deleted, if user put cursor after it and press backspace
* Readonly area can be styled using toolbar buttons
* Selecting multiple lines and making them readonly will create multiple Readonly areas

## Installation

The Vaadin components are distributed as Bower and npm packages.
Expand Down
72 changes: 40 additions & 32 deletions src/vcf-enhanced-rich-text-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@
flex: auto;
}

.readonly-section {
color: #676767;
/* background: #f9f9f9; */
background: #f1f1f1;
border-radius: 0.1em;
}

/* FIXME (Yuriy): workaround for auto-grow feature in flex layout for IE11 */
@media all and (-ms-high-contrast: none) {
.ql-editor {
Expand Down Expand Up @@ -155,16 +162,17 @@

<span part="toolbar-group toolbar-group-format"
style="display: [[_buttonGroupDisplay(toolbarButtons, 'format')]];">
<!-- Clean -->
<button type="button" class="ql-clean" part="toolbar-button toolbar-button-clean" title$="[[i18n.clean]]"
style="display: [[_buttonDisplay(toolbarButtons, 'clean')]];"></button>


<!-- Read-only -->
<button type="button" class="rte-readonly" part="toolbar-button toolbar-button-readonly"
title$="[[i18n.readonly]]" style="display: [[_buttonDisplay(toolbarButtons, 'readonly')]];"
on-click="_onReadonlyClick">
<iron-icon icon="vaadin:lock"></iron-icon>
</button>
title$="[[i18n.readonly]]" style="display: [[_buttonDisplay(toolbarButtons, 'readonly')]];"
on-click="_onReadonlyClick">
<iron-icon icon="vaadin:lock"></iron-icon>
</button>

<!-- Clean -->
<button type="button" class="ql-clean" part="toolbar-button toolbar-button-clean" title$="[[i18n.clean]]"
style="display: [[_buttonDisplay(toolbarButtons, 'clean')]];"></button>
</span>

<input id="fileInput" type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
Expand Down Expand Up @@ -220,34 +228,25 @@
const ListContainer = Quill.import('formats/list');
const Scroll = Quill.import('blots/scroll');

class ReadOnlyBlot extends Block {
class ReadOnlyBlot extends Inline {
static create(value) {
const node = super.create(value);

if (value) {
node.setAttribute('contenteditable', 'false');
} else {
node.setAttribute('contenteditable', 'true');
node.removeAttribute('contenteditable');
}

node.setAttribute('readonly', value);
return node;
}

format(name, value) {
if (value) {
this.domNode.setAttribute('contenteditable', 'false');
} else {
this.domNode.setAttribute('contenteditable', 'true');
}
this.domNode.setAttribute('readonly', value);
}

static formats(node) {
return node.getAttribute('readonly');
return true;
}
}
ReadOnlyBlot.blotName = 'readonly';
ReadOnlyBlot.tagName = 'p';
ReadOnlyBlot.tagName = 'span';
ReadOnlyBlot.className = 'readonly-section';
ReadOnlyBlot.allowedChildren = [Block, BlockEmbed, Inline, TextBlot, ListItem, ListContainer]; //[Inline, TextBlot];

Expand All @@ -258,7 +257,7 @@
const node = super.create(data);
node.style.left = '100px';
node.textContent = data;
//node.innerHTML = `<span style='left: 100px'>${data}</span>`;

return node;
}
}
Expand Down Expand Up @@ -438,7 +437,7 @@
'formats/nbsp': Nbsp
});

Inline.order.push(LinePartBlot.blotName, TabBlot.blotName, PreTabBlot.blotName, ReadOnlyBlot.blotName);
Inline.order.push(ReadOnlyBlot.blotName, LinePartBlot.blotName, TabBlot.blotName, PreTabBlot.blotName);

(function () {
'use strict';
Expand Down Expand Up @@ -640,6 +639,7 @@
link: 'link',
blockquote: 'blockquote',
codeBlock: 'code block',
readonly: 'readonly',
clean: 'clean',
linkDialogTitle: 'Link address',
ok: 'OK',
Expand Down Expand Up @@ -1007,8 +1007,14 @@

// add custom link button to toggle state attribute
const linkButton = this.shadowRoot.querySelector('[part~="toolbar-button-link"]');
if (linkButton)
toolbar.controls.push(['link', this.shadowRoot.querySelector('[part~="toolbar-button-link"]')]);
if (linkButton) {
toolbar.controls.push(['link', linkButton]);
}

const readonlyButton = this.shadowRoot.querySelector('[part~="toolbar-button-readonly"]');
if (readonlyButton) {
toolbar.controls.push(['readonly', readonlyButton]);
}

toolbar.update = function (range) {
update.call(toolbar, range);
Expand Down Expand Up @@ -1087,12 +1093,14 @@
const range = this._editor.getSelection();
if (range) {
const [readOnlySection, offset] = this._editor.scroll.descendant(ReadOnlyBlot, range.index);
if (readOnlySection != null) {
// existing readonly section
this._editor.formatText(range.index, range.length + 1, 'readonly', false, 'user');
} else {
this._editor.formatText(range.index, range.length + 1, 'readonly', true, 'user');
}
// if (readOnlySection != null) {
// // existing readonly section
// this._editor.formatText(range.index, range.length + 1, 'readonly', false, 'user');
// } else {
// this._editor.formatText(range.index, range.length + 1, 'readonly', true, 'user');
// }

this._editor.formatText(range.index, range.length + 1, 'readonly', readOnlySection == null, 'user');
}
}

Expand Down

0 comments on commit 01ee44d

Please sign in to comment.