@tinacms/app 0.0.0-9358e25-20250226014947 → 0.0.0-95a293c-20250401070633
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -9
- package/package.json +3 -3
- package/src/App.tsx +24 -24
- package/src/Playground.tsx +54 -54
- package/src/dummy-client.ts +1 -1
- package/src/fields/rich-text/index.tsx +2 -2
- package/src/fields/rich-text/monaco/error-message.tsx +54 -54
- package/src/fields/rich-text/monaco/index.tsx +56 -56
- package/src/fields/rich-text/monaco/use-debounce.ts +8 -8
- package/src/global.css +3 -3
- package/src/index.css +15 -15
- package/src/lib/build-form.ts +24 -24
- package/src/lib/errors.tsx +7 -7
- package/src/lib/expand-query.ts +66 -61
- package/src/lib/graphql-reducer.ts +289 -276
- package/src/lib/types.ts +34 -33
- package/src/lib/util.ts +41 -41
- package/src/main.tsx +7 -7
- package/src/preflight.css +10 -10
- package/src/preview.tsx +12 -12
- package/src/vite-env.d.ts +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,36 @@
|
|
|
1
1
|
# @tinacms/app
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
3
|
+
## 0.0.0-95a293c-20250401070633
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#5602](https://github.com/tinacms/tinacms/pull/5602) [`ab43169`](https://github.com/tinacms/tinacms/commit/ab43169af5a95f31fa27bb0236623a031883a1fd) Thanks [@wicksipedia](https://github.com/wicksipedia)! - fix naming of TinaCloud
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`921f235`](https://github.com/tinacms/tinacms/commit/921f2356e4615d532d02eefa7103fdb70f83b97a), [`ab43169`](https://github.com/tinacms/tinacms/commit/ab43169af5a95f31fa27bb0236623a031883a1fd), [`b551232`](https://github.com/tinacms/tinacms/commit/b5512326ad0ad9855bc75e2073a3ab2a8ec4c064), [`ea204c9`](https://github.com/tinacms/tinacms/commit/ea204c9045451f3ebea04f503e6158d2016613e4)]:
|
|
10
|
+
- tinacms@0.0.0-95a293c-20250401070633
|
|
11
|
+
- @tinacms/mdx@0.0.0-95a293c-20250401070633
|
|
12
|
+
|
|
13
|
+
## 2.2.3
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [[`991db1f`](https://github.com/tinacms/tinacms/commit/991db1f10c1f9cf9211d7e82bd56658cdcce24c7)]:
|
|
18
|
+
- tinacms@2.7.3
|
|
19
|
+
|
|
20
|
+
## 2.2.2
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- Updated dependencies [[`619e601`](https://github.com/tinacms/tinacms/commit/619e6010d6f95d893e980952bef64f747808c956), [`602b4d0`](https://github.com/tinacms/tinacms/commit/602b4d07f94de4c10d5bb059a5edc49546a2031c)]:
|
|
25
|
+
- tinacms@2.7.2
|
|
26
|
+
- @tinacms/mdx@1.6.1
|
|
27
|
+
|
|
28
|
+
## 2.2.1
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
|
6
31
|
|
|
7
32
|
- Updated dependencies [[`74513b3`](https://github.com/tinacms/tinacms/commit/74513b357aa27165aa86f7b3218c697c663539e8), [`06c1716`](https://github.com/tinacms/tinacms/commit/06c17163b558a96275b0ef66c746b005a6f90d13)]:
|
|
8
|
-
- tinacms@
|
|
33
|
+
- tinacms@2.7.1
|
|
9
34
|
|
|
10
35
|
## 2.2.0
|
|
11
36
|
|
|
@@ -446,7 +471,7 @@
|
|
|
446
471
|
|
|
447
472
|
fix: Use clean page-sizes on media manager (to make pagination more obvious)
|
|
448
473
|
|
|
449
|
-
Fix issue with uploading media in a folder with
|
|
474
|
+
Fix issue with uploading media in a folder with TinaCloud
|
|
450
475
|
|
|
451
476
|
- Updated dependencies [9c27087fb]
|
|
452
477
|
- Updated dependencies [65d0a701f]
|
|
@@ -769,7 +794,7 @@
|
|
|
769
794
|
> NOTE: Relative paths are fine to use here, but make sure it's relative to the `.tina/config` file
|
|
770
795
|
|
|
771
796
|
```ts
|
|
772
|
-
localContentPath: process.env.REMOTE_ROOT_PATH // eg. '../../my-content-repo'
|
|
797
|
+
localContentPath: process.env.REMOTE_ROOT_PATH; // eg. '../../my-content-repo'
|
|
773
798
|
```
|
|
774
799
|
|
|
775
800
|
### Production workflow
|
|
@@ -813,18 +838,18 @@
|
|
|
813
838
|
EX:
|
|
814
839
|
|
|
815
840
|
```ts
|
|
816
|
-
import { defineConfig } from
|
|
841
|
+
import { defineConfig } from "tinacms";
|
|
817
842
|
|
|
818
843
|
export default defineConfig({
|
|
819
844
|
admin: {
|
|
820
845
|
auth: {
|
|
821
846
|
onLogin: () => {
|
|
822
|
-
console.log(
|
|
847
|
+
console.log("On Log in!");
|
|
823
848
|
},
|
|
824
849
|
},
|
|
825
850
|
},
|
|
826
851
|
/// ...
|
|
827
|
-
})
|
|
852
|
+
});
|
|
828
853
|
```
|
|
829
854
|
|
|
830
855
|
- 9d4943a82: Fix issue resolving alias fields when passing through the `useTina` hook
|
|
@@ -1047,13 +1072,13 @@
|
|
|
1047
1072
|
|
|
1048
1073
|
```ts
|
|
1049
1074
|
// .tina/config.ts
|
|
1050
|
-
import schema from
|
|
1075
|
+
import schema from "./schema";
|
|
1051
1076
|
|
|
1052
1077
|
export default defineConfig({
|
|
1053
1078
|
schema: schema,
|
|
1054
1079
|
//.. Everything from define config in `schema.ts`
|
|
1055
1080
|
//.. Everything from `schema.config`
|
|
1056
|
-
})
|
|
1081
|
+
});
|
|
1057
1082
|
```
|
|
1058
1083
|
|
|
1059
1084
|
2. Add Build config
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tinacms/app",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-95a293c-20250401070633",
|
|
4
4
|
"main": "src/main.tsx",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"react-router-dom": "6.3.0",
|
|
23
23
|
"typescript": "^5.7.3",
|
|
24
24
|
"zod": "^3.24.2",
|
|
25
|
-
"
|
|
26
|
-
"tinacms": "0.0.0-
|
|
25
|
+
"tinacms": "0.0.0-95a293c-20250401070633",
|
|
26
|
+
"@tinacms/mdx": "0.0.0-95a293c-20250401070633"
|
|
27
27
|
}
|
|
28
28
|
}
|
package/src/App.tsx
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import React, { Suspense } from 'react'
|
|
2
|
-
import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms'
|
|
3
|
-
import { Preview } from './preview'
|
|
4
|
-
import Playground from './Playground'
|
|
1
|
+
import React, { Suspense } from 'react';
|
|
2
|
+
import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms';
|
|
3
|
+
import { Preview } from './preview';
|
|
4
|
+
import Playground from './Playground';
|
|
5
5
|
|
|
6
6
|
// TODO: Resolve this to local file in tsconfig.json
|
|
7
7
|
// @ts-expect-error
|
|
8
|
-
import config from 'TINA_IMPORT'
|
|
8
|
+
import config from 'TINA_IMPORT';
|
|
9
9
|
// @ts-expect-error
|
|
10
|
-
import schemaJson from 'SCHEMA_IMPORT'
|
|
10
|
+
import schemaJson from 'SCHEMA_IMPORT';
|
|
11
11
|
// @ts-expect-error
|
|
12
|
-
import staticMedia from 'STATIC_MEDIA_IMPORT'
|
|
12
|
+
import staticMedia from 'STATIC_MEDIA_IMPORT';
|
|
13
13
|
|
|
14
|
-
const RawEditor = React.lazy(() => import('./fields/rich-text'))
|
|
14
|
+
const RawEditor = React.lazy(() => import('./fields/rich-text'));
|
|
15
15
|
|
|
16
16
|
const Editor = (props) => {
|
|
17
|
-
const [rawMode, setRawMode] = React.useState(false)
|
|
17
|
+
const [rawMode, setRawMode] = React.useState(false);
|
|
18
18
|
return (
|
|
19
19
|
<MdxFieldPluginExtendible.Component
|
|
20
20
|
rawMode={rawMode}
|
|
@@ -26,32 +26,32 @@ const Editor = (props) => {
|
|
|
26
26
|
</Suspense>
|
|
27
27
|
}
|
|
28
28
|
/>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
31
|
|
|
32
32
|
const SetPreview = () => {
|
|
33
|
-
const cms = useCMS()
|
|
33
|
+
const cms = useCMS();
|
|
34
34
|
React.useEffect(() => {
|
|
35
35
|
// Override original 'rich-text' field with one that has raw mode support
|
|
36
36
|
cms.fields.add({
|
|
37
37
|
...MdxFieldPluginExtendible,
|
|
38
38
|
Component: Editor,
|
|
39
|
-
})
|
|
40
|
-
const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '')
|
|
41
|
-
cms.flags.set('tina-basepath', basePath)
|
|
39
|
+
});
|
|
40
|
+
const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '');
|
|
41
|
+
cms.flags.set('tina-basepath', basePath);
|
|
42
42
|
cms.flags.set(
|
|
43
43
|
'tina-preview',
|
|
44
44
|
`${basePath ? `${basePath}/` : ''}${config.build.outputFolder.replace(
|
|
45
45
|
/^\/|\/$/g,
|
|
46
46
|
''
|
|
47
47
|
)}`
|
|
48
|
-
)
|
|
49
|
-
}, [])
|
|
50
|
-
return null
|
|
51
|
-
}
|
|
48
|
+
);
|
|
49
|
+
}, []);
|
|
50
|
+
return null;
|
|
51
|
+
};
|
|
52
52
|
|
|
53
53
|
export const TinaAdminWrapper = () => {
|
|
54
|
-
const schema = { ...config?.schema, config }
|
|
54
|
+
const schema = { ...config?.schema, config };
|
|
55
55
|
return (
|
|
56
56
|
// @ts-ignore JSX element type 'TinaCMS' does not have any construct or call signatures.ts(2604)
|
|
57
57
|
<TinaCMS
|
|
@@ -70,10 +70,10 @@ export const TinaAdminWrapper = () => {
|
|
|
70
70
|
schemaJson={schemaJson}
|
|
71
71
|
/>
|
|
72
72
|
</TinaCMS>
|
|
73
|
-
)
|
|
74
|
-
}
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
75
|
|
|
76
76
|
function App() {
|
|
77
|
-
return <TinaAdminWrapper
|
|
77
|
+
return <TinaAdminWrapper />;
|
|
78
78
|
}
|
|
79
|
-
export default App
|
|
79
|
+
export default App;
|
package/src/Playground.tsx
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { createGraphiQLFetcher } from '@graphiql/toolkit'
|
|
2
|
-
import { GraphiQL } from 'graphiql'
|
|
3
|
-
import { parse, print } from 'graphql'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
import { useCMS } from 'tinacms'
|
|
6
|
-
import { FolderIcon } from '@heroicons/react/outline'
|
|
7
|
-
import { queries } from 'CLIENT_IMPORT'
|
|
1
|
+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
|
|
2
|
+
import { GraphiQL } from 'graphiql';
|
|
3
|
+
import { parse, print } from 'graphql';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { useCMS } from 'tinacms';
|
|
6
|
+
import { FolderIcon } from '@heroicons/react/outline';
|
|
7
|
+
import { queries } from 'CLIENT_IMPORT';
|
|
8
8
|
|
|
9
|
-
import 'graphiql/graphiql.min.css'
|
|
9
|
+
import 'graphiql/graphiql.min.css';
|
|
10
10
|
|
|
11
11
|
const Playground = () => {
|
|
12
|
-
const cms = useCMS()
|
|
13
|
-
const [query, setQuery] = React.useState('')
|
|
14
|
-
const [variables, setVariables] = React.useState('')
|
|
15
|
-
const [autoQueries, setAutoQueries] = React.useState()
|
|
12
|
+
const cms = useCMS();
|
|
13
|
+
const [query, setQuery] = React.useState('');
|
|
14
|
+
const [variables, setVariables] = React.useState('');
|
|
15
|
+
const [autoQueries, setAutoQueries] = React.useState();
|
|
16
16
|
const [collectionInfo, setCollectionInfo] = React.useState<{
|
|
17
17
|
collections: {
|
|
18
|
-
name: string
|
|
19
|
-
documents: { edges: { node: { _sys: { relativePath: string } } }[] }
|
|
20
|
-
}[]
|
|
21
|
-
}>()
|
|
18
|
+
name: string;
|
|
19
|
+
documents: { edges: { node: { _sys: { relativePath: string } } }[] };
|
|
20
|
+
}[];
|
|
21
|
+
}>();
|
|
22
22
|
React.useEffect(() => {
|
|
23
23
|
const run = async () => {
|
|
24
24
|
if (queries) {
|
|
25
|
-
const q = queries({ request: async () => query })
|
|
25
|
+
const q = queries({ request: async () => query });
|
|
26
26
|
setCollectionInfo(
|
|
27
27
|
await cms.api.tina.request(
|
|
28
28
|
`
|
|
@@ -45,52 +45,52 @@ const Playground = () => {
|
|
|
45
45
|
`,
|
|
46
46
|
{ variables: {} }
|
|
47
47
|
)
|
|
48
|
-
)
|
|
49
|
-
setAutoQueries(q)
|
|
48
|
+
);
|
|
49
|
+
setAutoQueries(q);
|
|
50
50
|
} else {
|
|
51
|
-
setAutoQueries({})
|
|
51
|
+
setAutoQueries({});
|
|
52
52
|
}
|
|
53
|
-
}
|
|
54
|
-
run()
|
|
55
|
-
}, [])
|
|
53
|
+
};
|
|
54
|
+
run();
|
|
55
|
+
}, []);
|
|
56
56
|
|
|
57
|
-
const ref = React.useRef()
|
|
57
|
+
const ref = React.useRef();
|
|
58
58
|
|
|
59
59
|
const getToken = () => {
|
|
60
|
-
return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token
|
|
61
|
-
}
|
|
60
|
+
return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token;
|
|
61
|
+
};
|
|
62
62
|
|
|
63
63
|
if (!autoQueries) {
|
|
64
|
-
return null
|
|
64
|
+
return null;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
const Plugin = () => {
|
|
68
|
-
const noAutoQueries = Object.keys(autoQueries).length === 0
|
|
68
|
+
const noAutoQueries = Object.keys(autoQueries).length === 0;
|
|
69
69
|
return (
|
|
70
70
|
<div>
|
|
71
|
-
<div className=
|
|
72
|
-
<div className=
|
|
73
|
-
<div className=
|
|
71
|
+
<div className='graphiql-doc-explorer-title'>Queries</div>
|
|
72
|
+
<div className='graphiql-doc-explorer-content'>
|
|
73
|
+
<div className='graphiql-markdown-description'>
|
|
74
74
|
{noAutoQueries
|
|
75
75
|
? 'No auto-generated queries found, the Tina config is likely set to client.skip = true'
|
|
76
76
|
: "Tina's auto-generated queries can be found here as well as any queries you may have defined yourself."}{' '}
|
|
77
|
-
<a href=
|
|
77
|
+
<a href='https://tina.io/docs/data-fetching/custom-queries/'>
|
|
78
78
|
Learn more here
|
|
79
79
|
</a>
|
|
80
80
|
</div>
|
|
81
|
-
<nav className=
|
|
81
|
+
<nav className='space-y-1' aria-label='Sidebar'>
|
|
82
82
|
<ul>
|
|
83
83
|
{Object.entries(autoQueries).map(([key, value]) => {
|
|
84
84
|
const collection = collectionInfo?.collections.find(
|
|
85
85
|
({ name }) => name === key
|
|
86
|
-
)
|
|
87
|
-
let variables = ''
|
|
88
|
-
let relativePath = ''
|
|
86
|
+
);
|
|
87
|
+
let variables = '';
|
|
88
|
+
let relativePath = '';
|
|
89
89
|
if (collection) {
|
|
90
90
|
relativePath =
|
|
91
91
|
collection?.documents?.edges[0]?.node?._sys.relativePath ||
|
|
92
|
-
''
|
|
93
|
-
variables = JSON.stringify({ relativePath }, null, 2)
|
|
92
|
+
'';
|
|
93
|
+
variables = JSON.stringify({ relativePath }, null, 2);
|
|
94
94
|
}
|
|
95
95
|
return (
|
|
96
96
|
<li>
|
|
@@ -104,31 +104,31 @@ const Playground = () => {
|
|
|
104
104
|
)}
|
|
105
105
|
onClick={async () => {
|
|
106
106
|
if (typeof value === 'function') {
|
|
107
|
-
const v = await value({})
|
|
108
|
-
const ast = parse(v.query)
|
|
109
|
-
setVariables(variables)
|
|
110
|
-
setQuery(print(ast))
|
|
107
|
+
const v = await value({});
|
|
108
|
+
const ast = parse(v.query);
|
|
109
|
+
setVariables(variables);
|
|
110
|
+
setQuery(print(ast));
|
|
111
111
|
}
|
|
112
112
|
}}
|
|
113
113
|
>
|
|
114
|
-
<span className=
|
|
114
|
+
<span className='truncate'>
|
|
115
115
|
{key}{' '}
|
|
116
116
|
{relativePath && (
|
|
117
|
-
<span className=
|
|
117
|
+
<span className='pl-2 text-sm text-gray-300'>
|
|
118
118
|
({relativePath})
|
|
119
119
|
</span>
|
|
120
120
|
)}{' '}
|
|
121
121
|
</span>
|
|
122
122
|
</button>
|
|
123
123
|
</li>
|
|
124
|
-
)
|
|
124
|
+
);
|
|
125
125
|
})}
|
|
126
126
|
</ul>
|
|
127
127
|
</nav>
|
|
128
128
|
</div>
|
|
129
129
|
</div>
|
|
130
|
-
)
|
|
131
|
-
}
|
|
130
|
+
);
|
|
131
|
+
};
|
|
132
132
|
return (
|
|
133
133
|
<div style={{ height: '100vh' }}>
|
|
134
134
|
<GraphiQL
|
|
@@ -136,11 +136,11 @@ const Playground = () => {
|
|
|
136
136
|
const fetcher = createGraphiQLFetcher({
|
|
137
137
|
url: __API_URL__,
|
|
138
138
|
headers: { Authorization: `Bearer ${getToken()}` },
|
|
139
|
-
})
|
|
140
|
-
return fetcher(params, options)
|
|
139
|
+
});
|
|
140
|
+
return fetcher(params, options);
|
|
141
141
|
}}
|
|
142
142
|
query={query}
|
|
143
|
-
defaultEditorToolsVisibility=
|
|
143
|
+
defaultEditorToolsVisibility='variables'
|
|
144
144
|
isHeadersEditorEnabled={false}
|
|
145
145
|
defaultTabs={[]}
|
|
146
146
|
plugins={[
|
|
@@ -153,11 +153,11 @@ const Playground = () => {
|
|
|
153
153
|
variables={variables}
|
|
154
154
|
></GraphiQL>
|
|
155
155
|
</div>
|
|
156
|
-
)
|
|
157
|
-
}
|
|
156
|
+
);
|
|
157
|
+
};
|
|
158
158
|
|
|
159
|
-
export default Playground
|
|
159
|
+
export default Playground;
|
|
160
160
|
|
|
161
161
|
function classNames(...classes: string[]) {
|
|
162
|
-
return classes.filter(Boolean).join(' ')
|
|
162
|
+
return classes.filter(Boolean).join(' ');
|
|
163
163
|
}
|
package/src/dummy-client.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const queries = false
|
|
1
|
+
export const queries = false;
|
|
@@ -3,45 +3,45 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
*/
|
|
6
|
-
import React from 'react'
|
|
7
|
-
import { XCircleIcon } from '@heroicons/react/solid'
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { XCircleIcon } from '@heroicons/react/solid';
|
|
8
8
|
import {
|
|
9
9
|
Popover,
|
|
10
10
|
PopoverButton,
|
|
11
11
|
PopoverPanel,
|
|
12
12
|
Transition,
|
|
13
|
-
} from '@headlessui/react'
|
|
14
|
-
import { Fragment } from 'react'
|
|
13
|
+
} from '@headlessui/react';
|
|
14
|
+
import { Fragment } from 'react';
|
|
15
15
|
// import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
|
|
16
|
-
export type EmptyTextElement = { type: 'text'; text: '' }
|
|
16
|
+
export type EmptyTextElement = { type: 'text'; text: '' };
|
|
17
17
|
export type PositionItem = {
|
|
18
|
-
line?: number | null
|
|
19
|
-
column?: number | null
|
|
20
|
-
offset?: number | null
|
|
21
|
-
_index?: number | null
|
|
22
|
-
_bufferIndex?: number | null
|
|
23
|
-
}
|
|
18
|
+
line?: number | null;
|
|
19
|
+
column?: number | null;
|
|
20
|
+
offset?: number | null;
|
|
21
|
+
_index?: number | null;
|
|
22
|
+
_bufferIndex?: number | null;
|
|
23
|
+
};
|
|
24
24
|
export type Position = {
|
|
25
|
-
start: PositionItem
|
|
26
|
-
end: PositionItem
|
|
27
|
-
}
|
|
25
|
+
start: PositionItem;
|
|
26
|
+
end: PositionItem;
|
|
27
|
+
};
|
|
28
28
|
export type InvalidMarkdownElement = {
|
|
29
|
-
type: 'invalid_markdown'
|
|
30
|
-
value: string
|
|
31
|
-
message: string
|
|
32
|
-
position?: Position
|
|
33
|
-
children: [EmptyTextElement]
|
|
34
|
-
}
|
|
29
|
+
type: 'invalid_markdown';
|
|
30
|
+
value: string;
|
|
31
|
+
message: string;
|
|
32
|
+
position?: Position;
|
|
33
|
+
children: [EmptyTextElement];
|
|
34
|
+
};
|
|
35
35
|
|
|
36
36
|
type ErrorType = {
|
|
37
|
-
message: string
|
|
37
|
+
message: string;
|
|
38
38
|
position?: {
|
|
39
|
-
startColumn: number
|
|
40
|
-
endColumn: number
|
|
41
|
-
startLineNumber: number
|
|
42
|
-
endLineNumber: number
|
|
43
|
-
}
|
|
44
|
-
}
|
|
39
|
+
startColumn: number;
|
|
40
|
+
endColumn: number;
|
|
41
|
+
startLineNumber: number;
|
|
42
|
+
endLineNumber: number;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
45
|
export const buildError = (element: InvalidMarkdownElement): ErrorType => {
|
|
46
46
|
return {
|
|
47
47
|
message: element.message,
|
|
@@ -51,28 +51,28 @@ export const buildError = (element: InvalidMarkdownElement): ErrorType => {
|
|
|
51
51
|
startLineNumber: element.position.start.line,
|
|
52
52
|
endLineNumber: element.position.end.line,
|
|
53
53
|
},
|
|
54
|
-
}
|
|
55
|
-
}
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
56
|
export const buildErrorMessage = (element: InvalidMarkdownElement): string => {
|
|
57
57
|
if (!element) {
|
|
58
|
-
return ''
|
|
58
|
+
return '';
|
|
59
59
|
}
|
|
60
|
-
const errorMessage = buildError(element)
|
|
60
|
+
const errorMessage = buildError(element);
|
|
61
61
|
const message = errorMessage
|
|
62
62
|
? `${errorMessage.message}${
|
|
63
63
|
errorMessage.position
|
|
64
64
|
? ` at line: ${errorMessage.position.startLineNumber}, column: ${errorMessage.position.startColumn}`
|
|
65
65
|
: ''
|
|
66
66
|
}`
|
|
67
|
-
: null
|
|
68
|
-
return message
|
|
69
|
-
}
|
|
67
|
+
: null;
|
|
68
|
+
return message;
|
|
69
|
+
};
|
|
70
70
|
|
|
71
71
|
export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
|
|
72
|
-
const message = buildErrorMessage(error)
|
|
72
|
+
const message = buildErrorMessage(error);
|
|
73
73
|
|
|
74
74
|
return (
|
|
75
|
-
<Popover className=
|
|
75
|
+
<Popover className='relative'>
|
|
76
76
|
{() => (
|
|
77
77
|
<>
|
|
78
78
|
<PopoverButton
|
|
@@ -80,29 +80,29 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
|
|
|
80
80
|
error ? '' : ' opacity-0 hidden '
|
|
81
81
|
}`}
|
|
82
82
|
>
|
|
83
|
-
<span className=
|
|
84
|
-
<XCircleIcon className=
|
|
83
|
+
<span className='sr-only'>Errors</span>
|
|
84
|
+
<XCircleIcon className='h-5 w-5 text-red-400' aria-hidden='true' />
|
|
85
85
|
</PopoverButton>
|
|
86
86
|
<Transition
|
|
87
|
-
enter=
|
|
88
|
-
enterFrom=
|
|
89
|
-
enterTo=
|
|
90
|
-
leave=
|
|
91
|
-
leaveFrom=
|
|
92
|
-
leaveTo=
|
|
87
|
+
enter='transition ease-out duration-200'
|
|
88
|
+
enterFrom='opacity-0 translate-y-1'
|
|
89
|
+
enterTo='opacity-100 translate-y-0'
|
|
90
|
+
leave='transition ease-in duration-150'
|
|
91
|
+
leaveFrom='opacity-100 translate-y-0'
|
|
92
|
+
leaveTo='opacity-0 translate-y-1'
|
|
93
93
|
>
|
|
94
|
-
<PopoverPanel className=
|
|
95
|
-
<div className=
|
|
96
|
-
<div className=
|
|
97
|
-
<div className=
|
|
98
|
-
<div className=
|
|
94
|
+
<PopoverPanel className='absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0'>
|
|
95
|
+
<div className='overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5'>
|
|
96
|
+
<div className='rounded-md bg-red-50 p-4 overflow-scroll'>
|
|
97
|
+
<div className='flex'>
|
|
98
|
+
<div className='flex-shrink-0'>
|
|
99
99
|
<XCircleIcon
|
|
100
|
-
className=
|
|
101
|
-
aria-hidden=
|
|
100
|
+
className='h-5 w-5 text-red-400'
|
|
101
|
+
aria-hidden='true'
|
|
102
102
|
/>
|
|
103
103
|
</div>
|
|
104
|
-
<div className=
|
|
105
|
-
<h3 className=
|
|
104
|
+
<div className='ml-3'>
|
|
105
|
+
<h3 className='text-sm font-medium text-red-800 whitespace-pre-wrap'>
|
|
106
106
|
{message}
|
|
107
107
|
</h3>
|
|
108
108
|
</div>
|
|
@@ -114,5 +114,5 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
|
|
|
114
114
|
</>
|
|
115
115
|
)}
|
|
116
116
|
</Popover>
|
|
117
|
-
)
|
|
117
|
+
);
|
|
118
118
|
}
|