Skip to content

Commit

Permalink
Disable Mutation Observer while saving (codex-team#563)
Browse files Browse the repository at this point in the history
* Disable Mutation Observer while saving

* rm image
  • Loading branch information
neSpecc authored Dec 20, 2018
1 parent 41ae41c commit 71315d9
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 21 deletions.
12 changes: 6 additions & 6 deletions dist/codex-editor.js

Large diffs are not rendered by default.

13 changes: 2 additions & 11 deletions example/example.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
-->
<script src="./tools/header/dist/bundle.js"></script><!-- Header -->
<script src="./tools/simple-image/dist/bundle.js"></script><!-- Image -->
<script src="./tools/image/dist/bundle.js"></script><!-- Image -->
<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
<script src="./tools/list/dist/bundle.js"></script><!-- List -->
<script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
Expand Down Expand Up @@ -93,13 +92,7 @@
* Or pass class directly without any configuration
*/
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile',
byUrl: 'http://localhost:8008/fetchUrl',
},
},
class: SimpleImage,
inlineToolbar: ['link'],
},

Expand Down Expand Up @@ -235,9 +228,7 @@
{
type: 'image',
data: {
file: {
url: 'https://ifmo.su/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',
},
url: 'https://ifmo.su/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',
caption: '',
stretched: false,
withBorder: true,
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "codex.editor",
"version": "2.7.14",
"version": "2.7.15",
"description": "CodeX Editor. Native JS, based on API and Open Source",
"main": "dist/codex-editor.js",
"types": "./types/index.d.ts",
Expand Down
30 changes: 29 additions & 1 deletion src/components/modules/modificationsObserver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ export default class ModificationsObserver extends Module {
*/
private observer: MutationObserver;

/**
* Allows to temporary disable mutations handling
*/
private disabled: boolean;

/**
* Used to prevent several mutation callback execution
* @type {Function}
Expand Down Expand Up @@ -52,6 +57,22 @@ export default class ModificationsObserver extends Module {
}, 1000);
}

/**
* Allows to disable observer,
* for example when Editor wants to stealthy mutate DOM
*/
public disable() {
this.disabled = true;
}

/**
* Enables mutation handling
* Should be called after .disable()
*/
public enable() {
this.disabled = false;
}

/**
* setObserver
*
Expand Down Expand Up @@ -80,9 +101,16 @@ export default class ModificationsObserver extends Module {
* @param observer
*/
private mutationHandler(mutationList, observer) {
/**
* Skip mutations in stealth mode
*/
if (this.disabled) {
return;
}

/**
* We divide two Mutation types:
* 1) mutations that concerns client changes. For example, settings changes, symbol added, deletion, insertions and so on
* 1) mutations that concerns client changes: settings changes, symbol added, deletion, insertions and so on
* 2) functional changes. On each client actions we set functional identifiers to interact with user
*/
let contentMutated = false;
Expand Down
12 changes: 10 additions & 2 deletions src/components/modules/saver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,23 @@ export default class Saver extends Module {
* @return {OutputData}
*/
public async save(): Promise<OutputData> {
const blocks = this.Editor.BlockManager.blocks,
const {BlockManager, Sanitizer, ModificationsObserver} = this.Editor;
const blocks = BlockManager.blocks,
chainData = [];

/**
* Disable modifications observe while saving
*/
ModificationsObserver.disable();

blocks.forEach((block: Block) => {
chainData.push(block.save());
});

const extractedData = await Promise.all(chainData);
const sanitizedData = await this.Editor.Sanitizer.sanitizeBlocks(extractedData);
const sanitizedData = await Sanitizer.sanitizeBlocks(extractedData);

ModificationsObserver.enable();

return this.makeOutput(sanitizedData);
}
Expand Down

0 comments on commit 71315d9

Please sign in to comment.