ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add test for deleting chapter intro highlights 

Relates to MS-895
This commit is contained in:
Ramon Wenger 2024-03-07 13:14:54 +01:00
parent 23698a432b
commit 0cf39373da
7 changed files with 112 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/cypress/e2e/frontend/modules/highlights.cy.ts
View File

@ -1,6 +1,14 @@
import log from 'loglevel';
import { defaultModuleQueriesandMutations } from '../../../support/helpers'; import { defaultModuleQueriesandMutations } from '../../../support/helpers';
import { instrumentWithLongContent } from './instrument-highlights'; import { instrumentWithLongContent } from './instrument-highlights';
const contentBlockId = window.btoa('ContentBlockNode:1');
const instrumentId = window.btoa('InstrumentNode:2');
const instrumentSlug = 'my-instrument';
const chapterId = window.btoa('ChapterNode:3');
const moduleId = window.btoa('ModuleNode:3');
const moduleSlug = 'my-module';
const getModule = (contents) => { const getModule = (contents) => {
return { return {
intro: '<p>Introducing this great paragraph!</p>', intro: '<p>Introducing this great paragraph!</p>',
@ -9,6 +17,8 @@ const getModule = (contents) => {
{ {
title: 'A Chapter', title: 'A Chapter',
description: 'This is something else', description: 'This is something else',
highlights: [],
id: chapterId,
contentBlocks: [ contentBlocks: [
{ {
title: 'A Content Block', title: 'A Content Block',
@ -48,14 +58,8 @@ const contentListContents = [
}, },
]; ];
const contentBlockId = window.btoa('ContentBlockNode:1');
const instrumentId = window.btoa('InstrumentNode:2');
const instrumentSlug = 'my-instrument';
const chapterId = window.btoa('ChapterNode:3');
const moduleId = window.btoa('ModuleNode:3');
const moduleSlug = 'my-module';
const getAddHighlight = (pageType: string = 'ModuleNode') => { const getAddHighlight = (pageType: string = 'ModuleNode') => {
log.debug(`adding highlight for page ${pageType}`);
let page: { id: string; __typename: string; slug?: string }; let page: { id: string; __typename: string; slug?: string };
if (pageType === 'ChapterNode') { if (pageType === 'ChapterNode') {
page = { page = {
@ -84,6 +88,7 @@ const getAddHighlight = (pageType: string = 'ModuleNode') => {
}; };
const getAddContentHighlight = (pageType: string = 'ContentBlockNode') => { const getAddContentHighlight = (pageType: string = 'ContentBlockNode') => {
log.debug(`adding content highlight for page type ${pageType}`);
let page: { id: string; __typename: string; slug?: string }; let page: { id: string; __typename: string; slug?: string };
if (pageType === 'InstrumentNode') { if (pageType === 'InstrumentNode') {
page = { page = {
@ -114,7 +119,7 @@ const getAddContentHighlight = (pageType: string = 'ContentBlockNode') => {
let lastHighlight; let lastHighlight;
const defaultModule = getModule(defaultContents); const defaultModule = getModule(defaultContents);
const operations = { const getOperations = (pageType = 'ModuleNode') => ({
...defaultModuleQueriesandMutations, ...defaultModuleQueriesandMutations,
ModuleDetailsQuery: { ModuleDetailsQuery: {
module: defaultModule, module: defaultModule,
@ -124,8 +129,8 @@ const operations = {
lastModule: defaultModule, lastModule: defaultModule,
}, },
}, },
AddHighlight: getAddHighlight(), AddHighlight: getAddHighlight(pageType),
AddContentHighlight: getAddContentHighlight(), AddContentHighlight: getAddContentHighlight(pageType),
UpdateHighlight: ({ input: { note, color } }) => { UpdateHighlight: ({ input: { note, color } }) => {
lastHighlight = { lastHighlight = {
...lastHighlight, ...lastHighlight,
@ -143,7 +148,9 @@ const operations = {
success: true, success: true,
}, },
}, },
}; });
const operations = getOperations();
const selectText = (elm: Node, start: number, end: number) => { const selectText = (elm: Node, start: number, end: number) => {
const range = document.createRange(); const range = document.createRange();
@ -335,7 +342,7 @@ describe('Highlights', () => {
it('visits a module and highlights the chapter description', () => { it('visits a module and highlights the chapter description', () => {
cy.mockGraphqlOps({ cy.mockGraphqlOps({
operations, operations: getOperations('ChapterNode'),
}); });
cy.visit('/module/my-module'); cy.visit('/module/my-module');
@ -348,6 +355,8 @@ describe('Highlights', () => {
cy.wait('@AddHighlight'); cy.wait('@AddHighlight');
updateHighlight(highlightedText); updateHighlight(highlightedText);
cy.getByDataCy('highlight-mark').should('have.length', 1); cy.getByDataCy('highlight-mark').should('have.length', 1);
deleteHighlight();
}); });
it('visits a module and highlights the module description', () => { it('visits a module and highlights the module description', () => {
cy.mockGraphqlOps({ cy.mockGraphqlOps({

10
client/src/__generated__/gql.ts generated
View File

@ -33,6 +33,8 @@ const documents = {
"\n mutation AddHighlight($input: AddHighlightInput!) {\n addHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n": types.AddHighlightDocument, "\n mutation AddHighlight($input: AddHighlightInput!) {\n addHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n": types.AddHighlightDocument,
"\n mutation AddContentHighlight($input: AddContentHighlightInput!) {\n addContentHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n": types.AddContentHighlightDocument, "\n mutation AddContentHighlight($input: AddContentHighlightInput!) {\n addContentHighlight(input: $input) {\n __typename\n highlight {\n ...HighlightParts\n }\n }\n }\n": types.AddContentHighlightDocument,
"\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n ": types.InstrumentHighlightsWithIdOnlyFragmentFragmentDoc, "\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n ": types.InstrumentHighlightsWithIdOnlyFragmentFragmentDoc,
"\n fragment ChapterHighlightsWithIdOnlyFragment on ChapterNode {\n highlights {\n id\n }\n }\n ": types.ChapterHighlightsWithIdOnlyFragmentFragmentDoc,
"\n fragment ModuleHighlightsWithIdOnlyFragment on ModuleNode {\n highlights {\n id\n }\n }\n ": types.ModuleHighlightsWithIdOnlyFragmentFragmentDoc,
"\n fragment ContentBlockHighlightsWithIdOnlyFragment on ContentBlockNode {\n highlights {\n id\n }\n }\n ": types.ContentBlockHighlightsWithIdOnlyFragmentFragmentDoc, "\n fragment ContentBlockHighlightsWithIdOnlyFragment on ContentBlockNode {\n highlights {\n id\n }\n }\n ": types.ContentBlockHighlightsWithIdOnlyFragmentFragmentDoc,
"\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateInstrumentBookmarkDocument, "\n mutation UpdateInstrumentBookmark($input: UpdateInstrumentBookmarkInput!) {\n updateInstrumentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateInstrumentBookmarkDocument,
"\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateContentBookmarkDocument, "\n mutation UpdateContentBookmark($input: UpdateContentBookmarkInput!) {\n updateContentBookmark(input: $input) {\n success\n }\n }\n ": types.UpdateContentBookmarkDocument,
@ -141,6 +143,14 @@ export function graphql(source: "\n mutation AddContentHighlight($input: AddCon
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */
export function graphql(source: "\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n "): (typeof documents)["\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n "]; export function graphql(source: "\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n "): (typeof documents)["\n fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n highlights {\n id\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ChapterHighlightsWithIdOnlyFragment on ChapterNode {\n highlights {\n id\n }\n }\n "): (typeof documents)["\n fragment ChapterHighlightsWithIdOnlyFragment on ChapterNode {\n highlights {\n id\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ModuleHighlightsWithIdOnlyFragment on ModuleNode {\n highlights {\n id\n }\n }\n "): (typeof documents)["\n fragment ModuleHighlightsWithIdOnlyFragment on ModuleNode {\n highlights {\n id\n }\n }\n "];
/** /**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */

10
client/src/__generated__/graphql.ts generated
View File

@ -763,7 +763,7 @@ export type HighlightNode = Node & {
/** The ID of the object */ /** The ID of the object */
id: Scalars['ID']['output']; id: Scalars['ID']['output'];
note?: Maybe<NoteNode>; note?: Maybe<NoteNode>;
page?: Maybe<HighlightableNode>; page: HighlightableNode;
paragraphIndex: Scalars['Int']['output']; paragraphIndex: Scalars['Int']['output'];
selectionLength: Scalars['Int']['output']; selectionLength: Scalars['Int']['output'];
startPosition: Scalars['Int']['output']; startPosition: Scalars['Int']['output'];
@ -2667,7 +2667,7 @@ export type ChapterHighlightsFragmentFragment = { __typename: 'ChapterNode', id:
& { ' $fragmentRefs'?: { 'HighlightPartsFragment': HighlightPartsFragment } } & { ' $fragmentRefs'?: { 'HighlightPartsFragment': HighlightPartsFragment } }
) | null> | null } & { ' $fragmentName'?: 'ChapterHighlightsFragmentFragment' }; ) | null> | null } & { ' $fragmentName'?: 'ChapterHighlightsFragmentFragment' };
export type HighlightPartsFragment = { __typename?: 'HighlightNode', id: string, contentIndex?: number | null, paragraphIndex: number, selectionLength: number, contentUuid?: any | null, startPosition: number, color: string, text: string, note?: { __typename?: 'NoteNode', text: string } | null, page?: { __typename: 'ChapterNode', id: string, path?: string | null, slug: string } | { __typename: 'ContentBlockNode', id: string, path?: string | null } | { __typename: 'InstrumentNode', id: string, slug: string } | { __typename: 'ModuleNode', id: string, slug: string, path?: string | null } | null } & { ' $fragmentName'?: 'HighlightPartsFragment' }; export type HighlightPartsFragment = { __typename?: 'HighlightNode', id: string, contentIndex?: number | null, paragraphIndex: number, selectionLength: number, contentUuid?: any | null, startPosition: number, color: string, text: string, note?: { __typename?: 'NoteNode', text: string } | null, page: { __typename: 'ChapterNode', id: string, path?: string | null, slug: string } | { __typename: 'ContentBlockNode', id: string, path?: string | null } | { __typename: 'InstrumentNode', id: string, slug: string } | { __typename: 'ModuleNode', id: string, slug: string, path?: string | null } } & { ' $fragmentName'?: 'HighlightPartsFragment' };
export type ContentBlockHighlightsFragmentFragment = { __typename: 'ContentBlockNode', id: string, highlights?: Array<( export type ContentBlockHighlightsFragmentFragment = { __typename: 'ContentBlockNode', id: string, highlights?: Array<(
{ __typename?: 'HighlightNode' } { __typename?: 'HighlightNode' }
@ -2775,6 +2775,10 @@ export type AddContentHighlightMutation = { __typename?: 'Mutation', addContentH
export type InstrumentHighlightsWithIdOnlyFragmentFragment = { __typename?: 'InstrumentNode', highlights: Array<{ __typename?: 'HighlightNode', id: string }> } & { ' $fragmentName'?: 'InstrumentHighlightsWithIdOnlyFragmentFragment' }; export type InstrumentHighlightsWithIdOnlyFragmentFragment = { __typename?: 'InstrumentNode', highlights: Array<{ __typename?: 'HighlightNode', id: string }> } & { ' $fragmentName'?: 'InstrumentHighlightsWithIdOnlyFragmentFragment' };
export type ChapterHighlightsWithIdOnlyFragmentFragment = { __typename?: 'ChapterNode', highlights?: Array<{ __typename?: 'HighlightNode', id: string } | null> | null } & { ' $fragmentName'?: 'ChapterHighlightsWithIdOnlyFragmentFragment' };
export type ModuleHighlightsWithIdOnlyFragmentFragment = { __typename?: 'ModuleNode', highlights?: Array<{ __typename?: 'HighlightNode', id: string } | null> | null } & { ' $fragmentName'?: 'ModuleHighlightsWithIdOnlyFragmentFragment' };
export type ContentBlockHighlightsWithIdOnlyFragmentFragment = { __typename?: 'ContentBlockNode', highlights?: Array<{ __typename?: 'HighlightNode', id: string } | null> | null } & { ' $fragmentName'?: 'ContentBlockHighlightsWithIdOnlyFragmentFragment' }; export type ContentBlockHighlightsWithIdOnlyFragmentFragment = { __typename?: 'ContentBlockNode', highlights?: Array<{ __typename?: 'HighlightNode', id: string } | null> | null } & { ' $fragmentName'?: 'ContentBlockHighlightsWithIdOnlyFragmentFragment' };
export type UpdateInstrumentBookmarkMutationVariables = Exact<{ export type UpdateInstrumentBookmarkMutationVariables = Exact<{
@ -2867,6 +2871,8 @@ export const SnapshotListItemFragmentDoc = {"kind":"Document","definitions":[{"k
export const SnapshotTitleFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotTitleFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotTitleFragmentFragment, unknown>; export const SnapshotTitleFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotTitleFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotTitleFragmentFragment, unknown>;
export const SnapshotDetailsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotDetailsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}}]}}]} as unknown as DocumentNode<SnapshotDetailsFragmentFragment, unknown>; export const SnapshotDetailsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotDetailsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}}]}}]} as unknown as DocumentNode<SnapshotDetailsFragmentFragment, unknown>;
export const InstrumentHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<InstrumentHighlightsWithIdOnlyFragmentFragment, unknown>; export const InstrumentHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<InstrumentHighlightsWithIdOnlyFragmentFragment, unknown>;
export const ChapterHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ChapterHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ChapterHighlightsWithIdOnlyFragmentFragment, unknown>;
export const ModuleHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModuleHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ModuleHighlightsWithIdOnlyFragmentFragment, unknown>;
export const ContentBlockHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ContentBlockHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ContentBlockHighlightsWithIdOnlyFragmentFragment, unknown>; export const ContentBlockHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ContentBlockHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ContentBlockHighlightsWithIdOnlyFragmentFragment, unknown>;
export const InstrumentPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<InstrumentPartsFragment, unknown>; export const InstrumentPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<InstrumentPartsFragment, unknown>;
export const InstrumentHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"instrumentHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<InstrumentHighlightsFragmentFragment, unknown>; export const InstrumentHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"instrumentHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ChapterNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<InstrumentHighlightsFragmentFragment, unknown>;

2
client/src/components/content-blocks/ContentComponent.vue
View File

@ -218,7 +218,7 @@ const bookmarkContent = (bookmarked: boolean) => {
const markHighlights = () => { const markHighlights = () => {
for (const highlight of filteredHighlights.value) { for (const highlight of filteredHighlights.value) {
const element = childElements.value[highlight.paragraphIndex]; const element = childElements.value[highlight.paragraphIndex];
markHighlight(highlight, element, contentComponentDiv.value); markHighlight(highlight, element, contentComponentDiv.value as HTMLElement);
} }
}; };

97
client/src/helpers/highlight.ts
View File

@ -338,7 +338,7 @@ const markClickListenerCurry =
}); });
}; };
export const markHighlight = (highlight: HighlightNode, element: HTMLElement, popoverElement: HTMLElement | null) => { export const markHighlight = (highlight: HighlightNode, element: HTMLElement, popoverElement: HTMLElement) => {
const instance = new Mark(element); const instance = new Mark(element);
const ranges: Mark.Range[] = [ const ranges: Mark.Range[] = [
{ {
@ -365,6 +365,67 @@ export const markHighlight = (highlight: HighlightNode, element: HTMLElement, po
}); });
}; };
// type them out, so the static codegen can do its work
const fragments = {
InstrumentNode: graphql(`
fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {
highlights {
id
}
}
`),
ChapterNode: graphql(`
fragment ChapterHighlightsWithIdOnlyFragment on ChapterNode {
highlights {
id
}
}
`),
ModuleNode: graphql(`
fragment ModuleHighlightsWithIdOnlyFragment on ModuleNode {
highlights {
id
}
}
`),
ContentBlockNode: graphql(`
fragment ContentBlockHighlightsWithIdOnlyFragment on ContentBlockNode {
highlights {
id
}
}
`),
};
const getCacheProperties = (cache, page, typename, identifier) => {
log.debug(`page is a ${typename}, remove highlights`);
const fragment = fragments[typename];
const id = cache.identify({
__typename: typename,
[identifier]: page[identifier],
});
log.debug(`id found: ${id}`);
return { fragment, id };
};
const cacheIdentifiers = {
InstrumentNode: 'slug',
ModuleNode: 'slug',
ChapterNode: 'id',
ContentBlockNode: 'id',
};
const getFragment = (cache, page: HighlightableNode) => {
const typename = page.__typename as string;
const identifier = cacheIdentifiers[typename];
const { fragment, id } = getCacheProperties(cache, page, typename, identifier);
const foundFragment = cache.readFragment({
fragment,
id,
});
return { fragment, id, foundFragment };
};
export const deleteHighlightCurry = (highlight: HighlightNode) => () => { export const deleteHighlightCurry = (highlight: HighlightNode) => () => {
doDeleteHighlight( doDeleteHighlight(
{ {
@ -382,37 +443,11 @@ export const deleteHighlightCurry = (highlight: HighlightNode) => () => {
} }
) => { ) => {
if (success) { if (success) {
log.debug('delete successful');
const page = highlight.page; const page = highlight.page;
let fragment: DocumentNode, id; log.debug(page.__typename);
if (page?.__typename === 'InstrumentNode') { const { fragment, id, foundFragment } = getFragment(cache, page);
fragment = graphql(` log.debug(foundFragment);
fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {
highlights {
id
}
}
`);
id = cache.identify({
__typename: 'InstrumentNode',
slug: highlight.page.slug,
});
} else {
fragment = graphql(`
fragment ContentBlockHighlightsWithIdOnlyFragment on ContentBlockNode {
highlights {
id
}
}
`);
id = cache.identify({
__typename: 'ContentBlockNode',
id: highlight.page.id,
});
}
const foundFragment = cache.readFragment({
fragment,
id,
});
if (foundFragment) { if (foundFragment) {
const data = { const data = {
...foundFragment, ...foundFragment,

2
server/notes/schema.py
View File

@ -105,7 +105,7 @@ class HighlightableNode(graphene.Union):
class HighlightNode(DjangoObjectType): class HighlightNode(DjangoObjectType):
page = graphene.Field(HighlightableNode) page = graphene.Field(HighlightableNode, required=True)
class Meta: class Meta:
model = Highlight model = Highlight

2
server/schema.graphql
View File

@ -171,7 +171,7 @@ type HighlightNode implements Node {
"""The ID of the object""" """The ID of the object"""
id: ID! id: ID!
user: PrivateUserNode! user: PrivateUserNode!
page: HighlightableNode page: HighlightableNode!
contentIndex: Int contentIndex: Int
contentUuid: UUID contentUuid: UUID
paragraphIndex: Int! paragraphIndex: Int!