Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@guardian/prosemirror-noting

Package Overview
Dependencies
Maintainers
34
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@guardian/prosemirror-noting - npm Package Compare versions

Comparing version 3.1.5 to 3.1.6

.metals/metals.h2.db

17

.eslintrc.json

@@ -6,10 +6,17 @@ {

},
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"@typescript-eslint/no-empty-function": "off"
}
}

@@ -156,4 +156,4 @@ 'use strict';

/*
* Writes
*/
* Writes
*/

@@ -173,4 +173,4 @@

/*
* Reads
*/
* Reads
*/

@@ -804,8 +804,8 @@ }, {

/*
* If we are pressing the menu button then if we have a cursor
* and are in a note then remove that note otherwise set a placeholder
* to start a note.
*
* If we have a selection decide whether to grow the note or slice it
*/
* If we are pressing the menu button then if we have a cursor
* and are in a note then remove that note otherwise set a placeholder
* to start a note.
*
* If we have a selection decide whether to grow the note or slice it
*/

@@ -884,9 +884,9 @@ }, {

/*
* If we are pasting or undoing gather the extent of the new content
* find any notes overlapping this range, and from this get the max
* range to edit.
*
* Then rebuild this range my removing all the notes and adding them
* back in
*/
* If we are pasting or undoing gather the extent of the new content
* find any notes overlapping this range, and from this get the max
* range to edit.
*
* Then rebuild this range my removing all the notes and adding them
* back in
*/

@@ -920,6 +920,6 @@ }, {

/*
* Otherwise if we just have a cursor and this is a normal typing
* type update then check whether we need to add a note from a
* placeholder
*/
* Otherwise if we just have a cursor and this is a normal typing
* type update then check whether we need to add a note from a
* placeholder
*/

@@ -926,0 +926,0 @@ }, {

{
"name": "@guardian/prosemirror-noting",
"version": "3.1.5",
"version": "3.1.6",
"description": "A plugin to allow noting in prosemirror",
"main": "dist/noting.js",
"types": "dist/noting.d.ts",
"license": "MIT",

@@ -15,34 +16,41 @@ "author": {

"prepublishOnly": "yarn build",
"build": "rollup -c",
"build": "tsc && rollup -c",
"watch": "rollup -c -w",
"lint": "eslint src/js/index.js",
"format": "prettier --write './src/**/*.js'",
"lint": "eslint \"src/js/**\"",
"format": "prettier --write '.'",
"publish-pages": "git subtree push --prefix pages/dist origin gh-pages"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.35",
"@babel/preset-env": "^7.0.0-beta.35",
"babel-core": "^7.0.0-0",
"babel-jest": "^22.0.1",
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"@babel/preset-typescript": "^7.9.0",
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-node-resolve": "^7.1.3",
"@types/prosemirror-model": "^1.7.2",
"@typescript-eslint/eslint-plugin": "^2.29.0",
"@typescript-eslint/parser": "^2.29.0",
"babel-jest": "^25.4.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"http-server": "^0.10.0",
"jest": "^22.0.1",
"prettier": "1.19.1",
"prosemirror-example-setup": "^1.1.2",
"prosemirror-history": "^1.1.3",
"prosemirror-keymap": "^1.1.3",
"prosemirror-menu": "^1.1.4",
"http-server": "^0.12.1",
"jest": "^25.4.0",
"prettier": "^2.0.5",
"prosemirror-example-setup": "^1.0.1",
"prosemirror-history": "^1.0.0",
"prosemirror-keymap": "^1.0.0",
"prosemirror-menu": "^1.0.1",
"prosemirror-model": "^1.9.1",
"prosemirror-schema-basic": "^1.1.2",
"prosemirror-test-builder": "^1.0.3",
"rollup": "^2.7.6",
"rollup-plugin-babel": "^4.0.0-beta.4",
"rollup-plugin-commonjs": "^8.2.6",
"prosemirror-schema-basic": "^1.0.0",
"prosemirror-test-builder": "^1.0.0",
"rollup": "^2.7.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-dts": "^1.4.0",
"rollup-plugin-eslint": "^7.0.0",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-scss": "^2.4.0"
"rollup-plugin-scss": "^2.4.0",
"typescript": "^3.8.3"
},

@@ -49,0 +57,0 @@ "dependencies": {

# prosemirror-noting
This plugin adds the ability to have ranges added to the document that expand and contract around dependent on the input. These notes are represented as `marks` in the document.

@@ -9,6 +10,9 @@

## Install
`npm install prosemirror-noting`
## Usage
Add the mark to the schema
```javascript

@@ -20,14 +24,16 @@ const mySchema = new Schema({

{
note: "span.note"
note: "span.note",
},
meta => ({
(meta) => ({
class: meta.hidden ? "note--collapsed" : "",
title: "My Title",
contenteditable: !meta.hidden
contenteditable: !meta.hidden,
})
)
})
),
}),
});
```
Add the plugin to the state
```javascript

@@ -44,8 +50,8 @@ const historyPlugin = history();

keymap({
F10: toggleNote("note")
F10: toggleNote("note"),
}),
historyPlugin,
noterPlugin
]
})
noterPlugin,
],
}),
});

@@ -57,3 +63,5 @@ ```

## API
### createNoteMark(typeTagMap: string | object, attrGenerator: function): MarkType
Returns a mark to be added to the schema.

@@ -65,2 +73,3 @@

### toggleNote(type: string = "note", cursorToEnd = false): CommandFunction
Returns a command used for toggling notes based on the cursor position.

@@ -72,2 +81,3 @@

Toggle note works in the following way:
- Selections

@@ -82,2 +92,3 @@ - Completely inside a note - will slice the note

### toggleAllNotes(type: string): CommandFunction
Returns a command used for toggling all notes.

@@ -88,2 +99,3 @@

### setNoteMeta(id: string, meta: object): CommandFunction
Returns a command to set the meta for a note id

@@ -95,8 +107,11 @@

### noter(markType: MarkType, historyPlugin: Plugin, onNoteCreate: function = () => {}): Plugin
Returns the plugin to add to prosemirror
Returns the plugin to add to prosemirror
- `markType` - the mark type that is being used in the schema to handle the notes.
- `historyPlugin` - pass the history plugin to handle undo / redo.
- `onNoteCreate` - a callback that is called when a new note is added to the document.
- `onNoteCreate` - a callback that is called when a new note is added to the document.
## Roadmap
- Add in collapsing as a config option, currently there are some overlapping concerns here (`meta.hidden` manually having to be set in the schema setup)

@@ -103,0 +118,0 @@ - Better documentation

@@ -1,6 +0,7 @@

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { eslint } from "rollup-plugin-eslint";
import scss from "rollup-plugin-scss";
import babel from "rollup-plugin-babel";
import dts from "rollup-plugin-dts";

@@ -12,15 +13,21 @@ export default [

file: "dist/noting.js",
format: "cjs"
format: "cjs",
},
plugins: [
scss({
output: "dist/noting.css"
output: "dist/noting.css",
}),
eslint({
exclude: ["node_modules/**"]
exclude: ["node_modules/**"],
}),
babel()
]
babel(),
],
},
{
//Types
input: "./dist/index.d.ts",
output: [{ file: "dist/noting.d.ts", format: "es" }],
plugins: [dts()],
},
{
// Github pages

@@ -31,15 +38,15 @@ input: "pages/index.js",

format: "iife",
name: "Pages"
name: "Pages",
},
plugins: [
scss({
output: "pages/dist/styles.css"
output: "pages/dist/styles.css",
}),
eslint({
exclude: ["node_modules/**"]
exclude: ["node_modules/**"],
}),
resolve({ browser: true }),
commonjs()
]
}
commonjs(),
],
},
];

@@ -10,3 +10,3 @@ import { Plugin, PluginKey } from "prosemirror-state";

sanitizeNode,
sanitizeFragment
sanitizeFragment,
} from "./utils/StateUtils";

@@ -17,3 +17,3 @@ import { createNoteMark } from "./utils/SchemaUtils";

const toggleNote = key => (type, cursorToEnd = false) => (state, dispatch) =>
const toggleNote = (key) => (type, cursorToEnd = false) => (state, dispatch) =>
dispatch

@@ -24,3 +24,3 @@ ? dispatch(

type,
cursorToEnd
cursorToEnd,
})

@@ -30,3 +30,3 @@ )

const setNotesMeta = key => (specs = []) => (state, dispatch) =>
const setNotesMeta = (key) => (specs = []) => (state, dispatch) =>
dispatch

@@ -36,3 +36,3 @@ ? dispatch(

key,
specs
specs,
})

@@ -42,8 +42,8 @@ )

const setNoteMeta = key => (id, meta) =>
const setNoteMeta = (key) => (id, meta) =>
setNotesMeta(key)([
{ id, meta: Object.assign({}, meta, { [MetaIdKey]: uuid() }) }
{ id, meta: Object.assign({}, meta, { [MetaIdKey]: uuid() }) },
]);
const collapseAllNotes = key => () => (state, dispatch) => {
const collapseAllNotes = (key) => () => (state, dispatch) => {
// @TODO: This is searching the entire doc for notes every time.

@@ -54,3 +54,3 @@ // NoteTracker is essentially the state of the Noter plugin, in

const allNotes = notesFromDoc(state.doc, state.config.schema.marks.note);
let hidden = !allNotes.every(note => note.meta.hidden === true);
const hidden = !allNotes.every((note) => note.meta.hidden === true);

@@ -64,4 +64,4 @@ if (!hidden) {

meta: {
hidden: true
}
hidden: true,
},
}));

@@ -72,5 +72,5 @@

const showAllNotes = key => () => (state, dispatch) => {
const showAllNotes = (key) => () => (state, dispatch) => {
const allNotes = notesFromDoc(state.doc, state.config.schema.marks.note);
let hidden = !allNotes.every(note => note.meta.hidden === true);
const hidden = !allNotes.every((note) => note.meta.hidden === true);

@@ -84,4 +84,4 @@ if (hidden) {

meta: {
hidden: false
}
hidden: false,
},
}));

@@ -92,3 +92,3 @@

const toggleAllNotes = key => () => (state, dispatch) =>
const toggleAllNotes = (key) => () => (state, dispatch) =>
collapseAllNotes(key)()(state)

@@ -120,3 +120,3 @@ ? collapseAllNotes(key)()(state, dispatch)

// (element: HTMLElement, side: Boolean) => void
modifyNoteDecoration = () => {}
modifyNoteDecoration = () => {},
}

@@ -156,7 +156,8 @@ ) => {

transformPasted: ({ content, openStart, openEnd }) =>
new Slice(sanitizeFragment(content, markType), openStart, openEnd)
new Slice(sanitizeFragment(content, markType), openStart, openEnd),
},
filterTransaction: (...args) =>
noteTransaction.filterTransaction(...args),
appendTransaction: (...args) => noteTransaction.appendTransaction(...args)
appendTransaction: (...args) =>
noteTransaction.appendTransaction(...args),
}),

@@ -169,3 +170,3 @@ toggleNote: toggleNote(key),

addNote: (start, end, id) =>
noteTracker.addNote(start, end, undefined, id, true)
noteTracker.addNote(start, end, undefined, id, true),
};

@@ -172,0 +173,0 @@ };

@@ -18,4 +18,4 @@ import { cloneDeep } from "./utils/helpers";

/*
* Writes
*/
* Writes
*/

@@ -36,4 +36,4 @@ mapPositions(startFunc, endFunc = startFunc) {

/*
* Reads
*/
* Reads
*/

@@ -46,8 +46,8 @@ rangesAround(from, to) {

start,
end: clamp(from, start, end)
end: clamp(from, start, end),
},
{
start: clamp(to, start, end),
end
}
end,
},
];

@@ -54,0 +54,0 @@ }

@@ -6,10 +6,10 @@ import Note from "./Note";

const ensureType = meta => {
const ensureType = (meta) => {
if (!meta) {
return {
type: "note"
type: "note",
};
} else if (!meta.type) {
return Object.assign({}, meta, {
type: "note"
type: "note",
});

@@ -27,3 +27,3 @@ }

}
this.notes = notes.filter(note => !note.isEmpty);
this.notes = notes.filter((note) => !note.isEmpty);
this.onNoteCreate = onNoteCreate;

@@ -88,3 +88,3 @@ this.sharedNoteStateTracker = sharedNoteStateTracker;

)
)
),
],

@@ -97,4 +97,4 @@ []

this.notes = this.notes
.map(note => note.mapPositions(startFunc, endFunc))
.filter(note => !note.isEmpty);
.map((note) => note.mapPositions(startFunc, endFunc))
.filter((note) => !note.isEmpty);
}

@@ -124,3 +124,3 @@

return (
this.notes.find(note => note.coversRange(from, to, bias !== 0)) || false
this.notes.find((note) => note.coversRange(from, to, bias !== 0)) || false
);

@@ -144,3 +144,4 @@ }

return this.notes.filter(
note => (!type || note.meta.type === type) && note.touchesRange(from, to)
(note) =>
(!type || note.meta.type === type) && note.touchesRange(from, to)
);

@@ -160,3 +161,3 @@ }

from: min,
to: max
to: max,
};

@@ -181,3 +182,3 @@ }

insertedRange(state) {
let ranges = getInsertedRanges(state);
const ranges = getInsertedRanges(state);

@@ -184,0 +185,0 @@ if (!ranges.length) {

@@ -83,3 +83,5 @@ import { Selection } from "prosemirror-state";

const { noteTracker, currentNoteID } = this;
const { selection: { $cursor: $oldCursor } } = oldState;
const {
selection: { $cursor: $oldCursor },
} = oldState;
const { $cursor } = tr.selection;

@@ -165,3 +167,3 @@

from: note.start,
to: note.end
to: note.end,
},

@@ -173,4 +175,4 @@ [

id: note.id,
meta: note.meta
}
meta: note.meta,
},
]

@@ -182,8 +184,8 @@ );

/*
* If we are pressing the menu button then if we have a cursor
* and are in a note then remove that note otherwise set a placeholder
* to start a note.
*
* If we have a selection decide whether to grow the note or slice it
*/
* If we are pressing the menu button then if we have a cursor
* and are in a note then remove that note otherwise set a placeholder
* to start a note.
*
* If we have a selection decide whether to grow the note or slice it
*/
handleToggle(type, cursorToEnd, oldState) {

@@ -211,3 +213,3 @@ const { noteTracker, tr, markType } = this;

to: from,
meta: cloneDeep(meta)
meta: cloneDeep(meta),
});

@@ -222,4 +224,4 @@

meta: {
type
}
type,
},
});

@@ -231,3 +233,3 @@ }

to: end,
meta: cloneDeep(meta)
meta: cloneDeep(meta),
});

@@ -238,3 +240,3 @@

from: start,
to: end
to: end,
},

@@ -249,9 +251,9 @@ notes

/*
* If we are pasting or undoing gather the extent of the new content
* find any notes overlapping this range, and from this get the max
* range to edit.
*
* Then rebuild this range my removing all the notes and adding them
* back in
*/
* If we are pasting or undoing gather the extent of the new content
* find any notes overlapping this range, and from this get the max
* range to edit.
*
* Then rebuild this range my removing all the notes and adding them
* back in
*/
handleChange(undo, oldState) {

@@ -269,7 +271,7 @@ const { noteTracker, tr, markType } = this;

rebuildRange,
positions.map(p => ({
positions.map((p) => ({
id: p.id,
from: p.start,
to: p.end,
meta: p.meta
meta: p.meta,
}))

@@ -287,6 +289,6 @@ );

/*
* Otherwise if we just have a cursor and this is a normal typing
* type update then check whether we need to add a note from a
* placeholder
*/
* Otherwise if we just have a cursor and this is a normal typing
* type update then check whether we need to add a note from a
* placeholder
*/
handleInput(oldState) {

@@ -332,3 +334,3 @@ const { tr } = this;

.map(({ from, to, meta, id }) => noteTracker.addNote(from, to, meta, id))
.filter(note => note); // remove notes that couldn't be added
.filter((note) => note); // remove notes that couldn't be added

@@ -335,0 +337,0 @@ this.tr = notes.reduce((_tr, { id, meta, start, end }) => {

@@ -95,4 +95,4 @@ /**

return this.noteTrackers
.map(noteTracker => noteTracker.noteAt(pos, bias))
.filter(noteOption => !!noteOption);
.map((noteTracker) => noteTracker.noteAt(pos, bias))
.filter((noteOption) => !!noteOption);
}

@@ -99,0 +99,0 @@ }

@@ -59,3 +59,3 @@ import { DecorationSet, Decoration } from "prosemirror-view";

side: sideAdjustedForPluginPriority,
marks: []
marks: [],
});

@@ -74,3 +74,3 @@ };

noteWrapper("NONE", state.selection.$cursor.pos, -1),
noteWrapper("NONE", state.selection.$cursor.pos, 1)
noteWrapper("NONE", state.selection.$cursor.pos, 1),
]

@@ -85,3 +85,3 @@ : [];

pluginPriority
) => state => {
) => (state) => {
return DecorationSet.create(state.doc, [

@@ -98,4 +98,4 @@ ...noteTracker.notes.reduce((out, { id, start, end, meta }) => {

}, []),
...placeholderDecos(noteTransaction, state)
...placeholderDecos(noteTransaction, state),
]);
};
// This might need improving, pretty thing implementation but for now it will
// suffice
export const cloneDeep = val => {
export const cloneDeep = (val) => {
if (val instanceof Array) {

@@ -10,3 +10,3 @@ return val.map(cloneDeep);

Object.assign({}, out, {
[key]: cloneDeep(val[key])
[key]: cloneDeep(val[key]),
}),

@@ -13,0 +13,0 @@ {}

import { hyphenatePascal } from "./StringUtils";
// Coerce trues
const attToVal = att => (att === "true" ? true : att);
const attToVal = (att) => (att === "true" ? true : att);

@@ -18,7 +18,7 @@ const noteToAttrs = (id, meta, attrGenerator = () => {}) => {

Object.keys(meta)
.filter(key => meta[key] !== false) // remove specials
.filter((key) => meta[key] !== false) // remove specials
.reduce(
(out, key) =>
Object.assign({}, out, {
[`data-${hyphenatePascal(key)}`]: meta[key]
[`data-${hyphenatePascal(key)}`]: meta[key],
}),

@@ -29,3 +29,3 @@ {}

class: classes.join(" "),
"data-note-id": id
"data-note-id": id,
}

@@ -38,13 +38,13 @@ );

meta: Object.keys(dataset)
.filter(key => key !== "noteId" && dataset[key] !== "false") // remove special or falses
.filter((key) => key !== "noteId" && dataset[key] !== "false") // remove special or falses
.reduce(
(out, key) =>
Object.assign({}, out, {
[key]: attToVal(dataset[key]) || defaults[key]
[key]: attToVal(dataset[key]) || defaults[key],
}),
{}
)
),
});
const filterTagTypeMap = tagTypeMap =>
const filterTagTypeMap = (tagTypeMap) =>
typeof tagTypeMap === "string" ? { note: tagTypeMap } : tagTypeMap;

@@ -54,3 +54,3 @@

const typeTagMap = filterTagTypeMap(_typeTagMap);
const values = Object.keys(typeTagMap).map(key => typeTagMap[key]);
const values = Object.keys(typeTagMap).map((key) => typeTagMap[key]);
if (values.length !== new Set(values).size) {

@@ -65,8 +65,8 @@ throw new Error(

meta: {
default: {}
}
default: {},
},
},
inclusive: false,
// Create a rule for every type
parseDOM: Object.keys(typeTagMap).map(type => ({
parseDOM: Object.keys(typeTagMap).map((type) => ({
tag: typeTagMap[type],

@@ -77,6 +77,6 @@ getAttrs: ({ dataset }) => {

meta: Object.assign({}, attrs.meta, {
type
})
type,
}),
});
}
},
})),

@@ -86,5 +86,5 @@ // Spit out the node based on the type

typeTagMap[meta.type],
noteToAttrs(id, meta, attrGenerator)
]
noteToAttrs(id, meta, attrGenerator),
],
};
};

@@ -8,9 +8,9 @@ import { AllSelection } from "prosemirror-state";

// which is then added in place of the old node
const updateFragmentNodes = updater => prevFrag => {
const updateFragmentNodes = (updater) => (prevFrag) => {
let frag = Fragment.empty;
const appendNodeToFragment = node =>
const appendNodeToFragment = (node) =>
(frag = frag.append(Fragment.from(node)));
prevFrag.forEach(node =>
prevFrag.forEach((node) =>
appendNodeToFragment(

@@ -42,7 +42,7 @@ node.copy(updateFragmentNodes(updater)(updater(node).content))

const sanitizeFragmentInner = (frag, markType, createId = uuid) => {
let idMap = {};
const idMap = {};
// the current id of the node according to the input document
let currentNoteId = null;
const setNewId = prevId => {
const setNewId = (prevId) => {
const newId = !idMap[prevId] ? prevId : createId();

@@ -58,3 +58,3 @@ idMap[prevId] = newId;

// is contiguous
const getAdjustNoteId = id => {
const getAdjustNoteId = (id) => {
if (id === currentNoteId) {

@@ -70,7 +70,7 @@ return idMap[id];

return updateFragmentNodes(node => {
return updateFragmentNodes((node) => {
const noteMark = markType.isInSet(node.marks);
if (noteMark) {
return updateNodeMarkAttrs(node, noteMark, {
id: getAdjustNoteId(noteMark.attrs.id)
id: getAdjustNoteId(noteMark.attrs.id),
});

@@ -89,3 +89,3 @@ }

const wrap = value => (Array.isArray(value) ? value : [value]);
const wrap = (value) => (Array.isArray(value) ? value : [value]);

@@ -105,3 +105,3 @@ // markTypes can either be a MarkType or MarkType[]

export const getInsertedRanges = ({ mapping }) => {
let ranges = [];
const ranges = [];
mapping.maps.forEach((stepMap, i) => {

@@ -111,3 +111,3 @@ stepMap.forEach((oldStart, oldEnd, newStart, newEnd) => {

mapping.slice(i + 1).map(newStart),
mapping.slice(i + 1).map(newEnd)
mapping.slice(i + 1).map(newEnd),
]);

@@ -151,3 +151,3 @@ });

start: Infinity,
end: -Infinity
end: -Infinity,
};

@@ -162,5 +162,5 @@

start,
end
}
]
end,
},
],
});

@@ -170,3 +170,3 @@ }

return Object.keys(notes).map(id => notes[id]);
return Object.keys(notes).map((id) => notes[id]);
};

@@ -1,2 +0,2 @@

export const hyphenatePascal = str =>
export const hyphenatePascal = (str) =>
str

@@ -3,0 +3,0 @@ .replace(/([a-z])([A-Z])/g, "$1-$2")

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc