forked from FINAKON/HelpProject
Bhargava
6063bd1724
1. Initial Commit - a boiler plate code and POC to realize the concept of context
sensitive help
2. Frontend code written in ReactJS
3. Backend code written in Java, Spring Boot Framework
4. Frontend Start:
pre-requisites : node, npm
npm run dev ==> to start the frontend vite server
5. Backend Start:
pre-requisites : java, mvn
mvn spring-boot:run ==> to start the backend server
6. Visit http://localhost:5173/ for basic demo of help, press F1 in textboxes
7. Visit http://localhost:5173/editor and enter "admin123" to add/modify texts.
Happy Coding !!!
Thank you,
Bhargava.
421 lines
17 KiB
JavaScript
421 lines
17 KiB
JavaScript
"use strict";
|
|
/*
|
|
React-Quill
|
|
https://github.com/zenoamaro/react-quill
|
|
*/
|
|
var __extends = (this && this.__extends) || (function () {
|
|
var extendStatics = function (d, b) {
|
|
extendStatics = Object.setPrototypeOf ||
|
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
return extendStatics(d, b);
|
|
};
|
|
return function (d, b) {
|
|
extendStatics(d, b);
|
|
function __() { this.constructor = d; }
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
};
|
|
})();
|
|
var __assign = (this && this.__assign) || function () {
|
|
__assign = Object.assign || function(t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
t[p] = s[p];
|
|
}
|
|
return t;
|
|
};
|
|
return __assign.apply(this, arguments);
|
|
};
|
|
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
r[k] = a[j];
|
|
return r;
|
|
};
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
};
|
|
var react_1 = __importDefault(require("react"));
|
|
var react_dom_1 = __importDefault(require("react-dom"));
|
|
var isEqual_1 = __importDefault(require("lodash/isEqual"));
|
|
var quill_1 = __importDefault(require("quill"));
|
|
var ReactQuill = /** @class */ (function (_super) {
|
|
__extends(ReactQuill, _super);
|
|
function ReactQuill(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
/*
|
|
Changing one of these props should cause a full re-render and a
|
|
re-instantiation of the Quill editor.
|
|
*/
|
|
_this.dirtyProps = [
|
|
'modules',
|
|
'formats',
|
|
'bounds',
|
|
'theme',
|
|
'children',
|
|
];
|
|
/*
|
|
Changing one of these props should cause a regular update. These are mostly
|
|
props that act on the container, rather than the quillized editing area.
|
|
*/
|
|
_this.cleanProps = [
|
|
'id',
|
|
'className',
|
|
'style',
|
|
'placeholder',
|
|
'tabIndex',
|
|
'onChange',
|
|
'onChangeSelection',
|
|
'onFocus',
|
|
'onBlur',
|
|
'onKeyPress',
|
|
'onKeyDown',
|
|
'onKeyUp',
|
|
];
|
|
_this.state = {
|
|
generation: 0,
|
|
};
|
|
/*
|
|
Tracks the internal selection of the Quill editor
|
|
*/
|
|
_this.selection = null;
|
|
_this.onEditorChange = function (eventName, rangeOrDelta, oldRangeOrDelta, source) {
|
|
var _a, _b, _c, _d;
|
|
if (eventName === 'text-change') {
|
|
(_b = (_a = _this).onEditorChangeText) === null || _b === void 0 ? void 0 : _b.call(_a, _this.editor.root.innerHTML, rangeOrDelta, source, _this.unprivilegedEditor);
|
|
}
|
|
else if (eventName === 'selection-change') {
|
|
(_d = (_c = _this).onEditorChangeSelection) === null || _d === void 0 ? void 0 : _d.call(_c, rangeOrDelta, source, _this.unprivilegedEditor);
|
|
}
|
|
};
|
|
var value = _this.isControlled() ? props.value : props.defaultValue;
|
|
_this.value = (value !== null && value !== void 0 ? value : '');
|
|
return _this;
|
|
}
|
|
ReactQuill.prototype.validateProps = function (props) {
|
|
var _a;
|
|
if (react_1.default.Children.count(props.children) > 1)
|
|
throw new Error('The Quill editing area can only be composed of a single React element.');
|
|
if (react_1.default.Children.count(props.children)) {
|
|
var child = react_1.default.Children.only(props.children);
|
|
if (((_a = child) === null || _a === void 0 ? void 0 : _a.type) === 'textarea')
|
|
throw new Error('Quill does not support editing on a <textarea>. Use a <div> instead.');
|
|
}
|
|
if (this.lastDeltaChangeSet &&
|
|
props.value === this.lastDeltaChangeSet)
|
|
throw new Error('You are passing the `delta` object from the `onChange` event back ' +
|
|
'as `value`. You most probably want `editor.getContents()` instead. ' +
|
|
'See: https://github.com/zenoamaro/react-quill#using-deltas');
|
|
};
|
|
ReactQuill.prototype.shouldComponentUpdate = function (nextProps, nextState) {
|
|
var _this = this;
|
|
var _a;
|
|
this.validateProps(nextProps);
|
|
// If the editor hasn't been instantiated yet, or the component has been
|
|
// regenerated, we already know we should update.
|
|
if (!this.editor || this.state.generation !== nextState.generation) {
|
|
return true;
|
|
}
|
|
// Handle value changes in-place
|
|
if ('value' in nextProps) {
|
|
var prevContents = this.getEditorContents();
|
|
var nextContents = (_a = nextProps.value, (_a !== null && _a !== void 0 ? _a : ''));
|
|
// NOTE: Seeing that Quill is missing a way to prevent edits, we have to
|
|
// settle for a hybrid between controlled and uncontrolled mode. We
|
|
// can't prevent the change, but we'll still override content
|
|
// whenever `value` differs from current state.
|
|
// NOTE: Comparing an HTML string and a Quill Delta will always trigger a
|
|
// change, regardless of whether they represent the same document.
|
|
if (!this.isEqualValue(nextContents, prevContents)) {
|
|
this.setEditorContents(this.editor, nextContents);
|
|
}
|
|
}
|
|
// Handle read-only changes in-place
|
|
if (nextProps.readOnly !== this.props.readOnly) {
|
|
this.setEditorReadOnly(this.editor, nextProps.readOnly);
|
|
}
|
|
// Clean and Dirty props require a render
|
|
return __spreadArrays(this.cleanProps, this.dirtyProps).some(function (prop) {
|
|
return !isEqual_1.default(nextProps[prop], _this.props[prop]);
|
|
});
|
|
};
|
|
ReactQuill.prototype.shouldComponentRegenerate = function (nextProps) {
|
|
var _this = this;
|
|
// Whenever a `dirtyProp` changes, the editor needs reinstantiation.
|
|
return this.dirtyProps.some(function (prop) {
|
|
return !isEqual_1.default(nextProps[prop], _this.props[prop]);
|
|
});
|
|
};
|
|
ReactQuill.prototype.componentDidMount = function () {
|
|
this.instantiateEditor();
|
|
this.setEditorContents(this.editor, this.getEditorContents());
|
|
};
|
|
ReactQuill.prototype.componentWillUnmount = function () {
|
|
this.destroyEditor();
|
|
};
|
|
ReactQuill.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
var _this = this;
|
|
// If we're changing one of the `dirtyProps`, the entire Quill Editor needs
|
|
// to be re-instantiated. Regenerating the editor will cause the whole tree,
|
|
// including the container, to be cleaned up and re-rendered from scratch.
|
|
// Store the contents so they can be restored later.
|
|
if (this.editor && this.shouldComponentRegenerate(prevProps)) {
|
|
var delta = this.editor.getContents();
|
|
var selection = this.editor.getSelection();
|
|
this.regenerationSnapshot = { delta: delta, selection: selection };
|
|
this.setState({ generation: this.state.generation + 1 });
|
|
this.destroyEditor();
|
|
}
|
|
// The component has been regenerated, so it must be re-instantiated, and
|
|
// its content must be restored to the previous values from the snapshot.
|
|
if (this.state.generation !== prevState.generation) {
|
|
var _a = this.regenerationSnapshot, delta = _a.delta, selection_1 = _a.selection;
|
|
delete this.regenerationSnapshot;
|
|
this.instantiateEditor();
|
|
var editor_1 = this.editor;
|
|
editor_1.setContents(delta);
|
|
postpone(function () { return _this.setEditorSelection(editor_1, selection_1); });
|
|
}
|
|
};
|
|
ReactQuill.prototype.instantiateEditor = function () {
|
|
if (this.editor) {
|
|
this.hookEditor(this.editor);
|
|
}
|
|
else {
|
|
this.editor = this.createEditor(this.getEditingArea(), this.getEditorConfig());
|
|
}
|
|
};
|
|
ReactQuill.prototype.destroyEditor = function () {
|
|
if (!this.editor)
|
|
return;
|
|
this.unhookEditor(this.editor);
|
|
};
|
|
/*
|
|
We consider the component to be controlled if `value` is being sent in props.
|
|
*/
|
|
ReactQuill.prototype.isControlled = function () {
|
|
return 'value' in this.props;
|
|
};
|
|
ReactQuill.prototype.getEditorConfig = function () {
|
|
return {
|
|
bounds: this.props.bounds,
|
|
formats: this.props.formats,
|
|
modules: this.props.modules,
|
|
placeholder: this.props.placeholder,
|
|
readOnly: this.props.readOnly,
|
|
scrollingContainer: this.props.scrollingContainer,
|
|
tabIndex: this.props.tabIndex,
|
|
theme: this.props.theme,
|
|
};
|
|
};
|
|
ReactQuill.prototype.getEditor = function () {
|
|
if (!this.editor)
|
|
throw new Error('Accessing non-instantiated editor');
|
|
return this.editor;
|
|
};
|
|
/**
|
|
Creates an editor on the given element. The editor will be passed the
|
|
configuration, have its events bound,
|
|
*/
|
|
ReactQuill.prototype.createEditor = function (element, config) {
|
|
var editor = new quill_1.default(element, config);
|
|
if (config.tabIndex != null) {
|
|
this.setEditorTabIndex(editor, config.tabIndex);
|
|
}
|
|
this.hookEditor(editor);
|
|
return editor;
|
|
};
|
|
ReactQuill.prototype.hookEditor = function (editor) {
|
|
// Expose the editor on change events via a weaker, unprivileged proxy
|
|
// object that does not allow accidentally modifying editor state.
|
|
this.unprivilegedEditor = this.makeUnprivilegedEditor(editor);
|
|
// Using `editor-change` allows picking up silent updates, like selection
|
|
// changes on typing.
|
|
editor.on('editor-change', this.onEditorChange);
|
|
};
|
|
ReactQuill.prototype.unhookEditor = function (editor) {
|
|
editor.off('editor-change', this.onEditorChange);
|
|
};
|
|
ReactQuill.prototype.getEditorContents = function () {
|
|
return this.value;
|
|
};
|
|
ReactQuill.prototype.getEditorSelection = function () {
|
|
return this.selection;
|
|
};
|
|
/*
|
|
True if the value is a Delta instance or a Delta look-alike.
|
|
*/
|
|
ReactQuill.prototype.isDelta = function (value) {
|
|
return value && value.ops;
|
|
};
|
|
/*
|
|
Special comparison function that knows how to compare Deltas.
|
|
*/
|
|
ReactQuill.prototype.isEqualValue = function (value, nextValue) {
|
|
if (this.isDelta(value) && this.isDelta(nextValue)) {
|
|
return isEqual_1.default(value.ops, nextValue.ops);
|
|
}
|
|
else {
|
|
return isEqual_1.default(value, nextValue);
|
|
}
|
|
};
|
|
/*
|
|
Replace the contents of the editor, but keep the previous selection hanging
|
|
around so that the cursor won't move.
|
|
*/
|
|
ReactQuill.prototype.setEditorContents = function (editor, value) {
|
|
var _this = this;
|
|
this.value = value;
|
|
var sel = this.getEditorSelection();
|
|
if (typeof value === 'string') {
|
|
editor.setContents(editor.clipboard.convert(value));
|
|
}
|
|
else {
|
|
editor.setContents(value);
|
|
}
|
|
postpone(function () { return _this.setEditorSelection(editor, sel); });
|
|
};
|
|
ReactQuill.prototype.setEditorSelection = function (editor, range) {
|
|
this.selection = range;
|
|
if (range) {
|
|
// Validate bounds before applying.
|
|
var length_1 = editor.getLength();
|
|
range.index = Math.max(0, Math.min(range.index, length_1 - 1));
|
|
range.length = Math.max(0, Math.min(range.length, (length_1 - 1) - range.index));
|
|
editor.setSelection(range);
|
|
}
|
|
};
|
|
ReactQuill.prototype.setEditorTabIndex = function (editor, tabIndex) {
|
|
var _a, _b;
|
|
if ((_b = (_a = editor) === null || _a === void 0 ? void 0 : _a.scroll) === null || _b === void 0 ? void 0 : _b.domNode) {
|
|
editor.scroll.domNode.tabIndex = tabIndex;
|
|
}
|
|
};
|
|
ReactQuill.prototype.setEditorReadOnly = function (editor, value) {
|
|
if (value) {
|
|
editor.disable();
|
|
}
|
|
else {
|
|
editor.enable();
|
|
}
|
|
};
|
|
/*
|
|
Returns a weaker, unprivileged proxy object that only exposes read-only
|
|
accessors found on the editor instance, without any state-modifying methods.
|
|
*/
|
|
ReactQuill.prototype.makeUnprivilegedEditor = function (editor) {
|
|
var e = editor;
|
|
return {
|
|
getHTML: function () { return e.root.innerHTML; },
|
|
getLength: e.getLength.bind(e),
|
|
getText: e.getText.bind(e),
|
|
getContents: e.getContents.bind(e),
|
|
getSelection: e.getSelection.bind(e),
|
|
getBounds: e.getBounds.bind(e),
|
|
};
|
|
};
|
|
ReactQuill.prototype.getEditingArea = function () {
|
|
if (!this.editingArea) {
|
|
throw new Error('Instantiating on missing editing area');
|
|
}
|
|
var element = react_dom_1.default.findDOMNode(this.editingArea);
|
|
if (!element) {
|
|
throw new Error('Cannot find element for editing area');
|
|
}
|
|
if (element.nodeType === 3) {
|
|
throw new Error('Editing area cannot be a text node');
|
|
}
|
|
return element;
|
|
};
|
|
/*
|
|
Renders an editor area, unless it has been provided one to clone.
|
|
*/
|
|
ReactQuill.prototype.renderEditingArea = function () {
|
|
var _this = this;
|
|
var _a = this.props, children = _a.children, preserveWhitespace = _a.preserveWhitespace;
|
|
var generation = this.state.generation;
|
|
var properties = {
|
|
key: generation,
|
|
ref: function (instance) {
|
|
_this.editingArea = instance;
|
|
},
|
|
};
|
|
if (react_1.default.Children.count(children)) {
|
|
return react_1.default.cloneElement(react_1.default.Children.only(children), properties);
|
|
}
|
|
return preserveWhitespace ?
|
|
react_1.default.createElement("pre", __assign({}, properties)) :
|
|
react_1.default.createElement("div", __assign({}, properties));
|
|
};
|
|
ReactQuill.prototype.render = function () {
|
|
var _a;
|
|
return (react_1.default.createElement("div", { id: this.props.id, style: this.props.style, key: this.state.generation, className: "quill " + (_a = this.props.className, (_a !== null && _a !== void 0 ? _a : '')), onKeyPress: this.props.onKeyPress, onKeyDown: this.props.onKeyDown, onKeyUp: this.props.onKeyUp }, this.renderEditingArea()));
|
|
};
|
|
ReactQuill.prototype.onEditorChangeText = function (value, delta, source, editor) {
|
|
var _a, _b;
|
|
if (!this.editor)
|
|
return;
|
|
// We keep storing the same type of value as what the user gives us,
|
|
// so that value comparisons will be more stable and predictable.
|
|
var nextContents = this.isDelta(this.value)
|
|
? editor.getContents()
|
|
: editor.getHTML();
|
|
if (nextContents !== this.getEditorContents()) {
|
|
// Taint this `delta` object, so we can recognize whether the user
|
|
// is trying to send it back as `value`, preventing a likely loop.
|
|
this.lastDeltaChangeSet = delta;
|
|
this.value = nextContents;
|
|
(_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, delta, source, editor);
|
|
}
|
|
};
|
|
ReactQuill.prototype.onEditorChangeSelection = function (nextSelection, source, editor) {
|
|
var _a, _b, _c, _d, _e, _f;
|
|
if (!this.editor)
|
|
return;
|
|
var currentSelection = this.getEditorSelection();
|
|
var hasGainedFocus = !currentSelection && nextSelection;
|
|
var hasLostFocus = currentSelection && !nextSelection;
|
|
if (isEqual_1.default(nextSelection, currentSelection))
|
|
return;
|
|
this.selection = nextSelection;
|
|
(_b = (_a = this.props).onChangeSelection) === null || _b === void 0 ? void 0 : _b.call(_a, nextSelection, source, editor);
|
|
if (hasGainedFocus) {
|
|
(_d = (_c = this.props).onFocus) === null || _d === void 0 ? void 0 : _d.call(_c, nextSelection, source, editor);
|
|
}
|
|
else if (hasLostFocus) {
|
|
(_f = (_e = this.props).onBlur) === null || _f === void 0 ? void 0 : _f.call(_e, currentSelection, source, editor);
|
|
}
|
|
};
|
|
ReactQuill.prototype.focus = function () {
|
|
if (!this.editor)
|
|
return;
|
|
this.editor.focus();
|
|
};
|
|
ReactQuill.prototype.blur = function () {
|
|
if (!this.editor)
|
|
return;
|
|
this.selection = null;
|
|
this.editor.blur();
|
|
};
|
|
ReactQuill.displayName = 'React Quill';
|
|
/*
|
|
Export Quill to be able to call `register`
|
|
*/
|
|
ReactQuill.Quill = quill_1.default;
|
|
ReactQuill.defaultProps = {
|
|
theme: 'snow',
|
|
modules: {},
|
|
readOnly: false,
|
|
};
|
|
return ReactQuill;
|
|
}(react_1.default.Component));
|
|
/*
|
|
Small helper to execute a function in the next micro-tick.
|
|
*/
|
|
function postpone(fn) {
|
|
Promise.resolve().then(fn);
|
|
}
|
|
module.exports = ReactQuill;
|
|
//# sourceMappingURL=index.js.map
|