Skip to content

Commit 5a47f57

Browse files
SharonStratsSharonStrats
committed
editor card - rdfxml and n3
1 parent 7ea89eb commit 5a47f57

6 files changed

Lines changed: 133 additions & 235 deletions

File tree

‎src/RDFXMLPane.css‎

Lines changed: 1 addition & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,6 @@
11
.rdfxml-pane {
2-
padding: 1rem;
32
width: 100%;
43
min-width: 0;
5-
border-top: solid 2px var(--color-data-pane-border-top, black);
6-
border-left: solid 2px var(--color-data-pane-border-top, black);
7-
border-bottom: solid 2px var(--color-data-pane-border-side, #777);
8-
border-right: solid 2px var(--color-data-pane-border-side, #777);
9-
color: var(--color-text-brown, #440);
4+
border: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
105
box-sizing: border-box;
116
}
12-
13-
.rdfxml-pane__source {
14-
overflow-x: auto;
15-
max-width: 100%;
16-
min-width: 0;
17-
box-sizing: border-box;
18-
font-family: monospace;
19-
font-size: 120%;
20-
margin: 0;
21-
white-space: pre;
22-
}
23-
24-
.rdfxml-pane__line {
25-
display: grid;
26-
grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
27-
align-items: start;
28-
min-width: 0;
29-
}
30-
31-
.rdfxml-pane__line-indent {
32-
display: block;
33-
width: var(--rdfxml-indent, 0);
34-
}
35-
36-
.rdfxml-pane__line-content {
37-
white-space: pre;
38-
}
39-
40-
.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__source {
41-
overflow-wrap: anywhere;
42-
word-break: break-word;
43-
white-space: normal;
44-
}
45-
46-
.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line {
47-
grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
48-
}
49-
50-
.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line-content {
51-
white-space: pre-wrap;
52-
overflow-wrap: anywhere;
53-
word-break: break-word;
54-
min-width: 0;
55-
}
56-
57-
@media (max-width: 576px) {
58-
.rdfxml-pane__source {
59-
overflow-wrap: anywhere;
60-
word-break: break-word;
61-
white-space: normal;
62-
}
63-
64-
.rdfxml-pane__line {
65-
grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
66-
}
67-
68-
.rdfxml-pane__line-content {
69-
white-space: pre-wrap;
70-
overflow-wrap: anywhere;
71-
word-break: break-word;
72-
min-width: 0;
73-
}
74-
}

‎src/RDFXMLPane.ts‎

Lines changed: 16 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@
55
** in generated N3 syntax.
66
*/
77

8-
import * as UI from 'solid-ui'
9-
import * as $rdf from 'rdflib'
10-
import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
11-
import type { NamedNode, Statement } from 'rdflib'
8+
import { ns, icons } from 'solid-ui'
9+
import type { DataBrowserContext } from 'pane-registry'
10+
import { Serializer, type NamedNode, type Statement } from 'rdflib'
1211
import './RDFXMLPane.css'
13-
14-
const ns = UI.ns
12+
import './components/editor-card/EditorCard'
1513

1614
type RDFXMLPaneDefinition = {
1715
icon: string
@@ -21,32 +19,8 @@ type RDFXMLPaneDefinition = {
2119
render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement
2220
}
2321

24-
function leadingIndentWidth (line: string): number {
25-
if (line.trim().length === 0) {
26-
return 0
27-
}
28-
29-
let width = 0
30-
for (const character of line) {
31-
if (character === ' ') {
32-
width += 1
33-
continue
34-
}
35-
if (character === '\t') {
36-
width += 2
37-
continue
38-
}
39-
break
40-
}
41-
return Math.max(width, 2)
42-
}
43-
44-
function trimLeadingIndent (line: string): string {
45-
return line.replace(/^[ \t]+/, '')
46-
}
47-
4822
export const RDFXMLPane: RDFXMLPaneDefinition = {
49-
icon: UI.icons.originalIconBase + '22-text-xml4.png',
23+
icon: icons.originalIconBase + '22-text-xml4.png',
5024

5125
name: 'RDFXML',
5226

@@ -74,60 +48,30 @@ export const RDFXMLPane: RDFXMLPaneDefinition = {
7448
const myDocument = context.dom
7549
const kb = context.session.store
7650

77-
function applyEnvironmentAttributes (element: HTMLDivElement): void {
78-
const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
79-
element.dataset.layout = environment.layout ?? 'desktop'
80-
}
81-
8251
const div = myDocument.createElement('div')
8352
div.setAttribute('class', 'rdfxml-pane')
84-
applyEnvironmentAttributes(div)
8553
// Because of smushing etc, this will not be a copy of the original source
8654
// We could instead either fetch and re-parse the source,
8755
// or we could keep all the pre-smushed triples.
88-
const sts = kb.statementsMatching(
56+
const statements = kb.statementsMatching(
8957
undefined,
9058
undefined,
9159
undefined,
9260
subject
93-
) as Statement[] // @@ slow with current store!
94-
/*
95-
var kludge = kb.formula([]) // No features
96-
for (var i=0; i< sts.length; i++) {
97-
s = sts[i]
98-
kludge.add(s.subject, s.predicate, s.object)
99-
}
100-
*/
101-
const sz = $rdf.Serializer(kb)
61+
) as Statement[]
62+
63+
const sz = Serializer(kb)
10264
sz.suggestNamespaces(kb.namespaces)
10365
sz.setBase(subject.uri)
104-
const str = sz.statementsToXML(sts)
105-
const source = myDocument.createElement('div')
106-
source.classList.add('rdfxml-pane__source')
107-
108-
str.split('\n').forEach(line => {
109-
const lineElement = myDocument.createElement('div')
110-
const indentElement = myDocument.createElement('span')
111-
const contentElement = myDocument.createElement('span')
112-
const indentWidth = leadingIndentWidth(line)
113-
114-
lineElement.classList.add('rdfxml-pane__line')
115-
lineElement.style.setProperty('--rdfxml-indent', `${indentWidth}ch`)
116-
117-
indentElement.classList.add('rdfxml-pane__line-indent')
118-
indentElement.setAttribute('aria-hidden', 'true')
119-
120-
contentElement.classList.add('rdfxml-pane__line-content')
121-
contentElement.textContent = line.length > 0 ? trimLeadingIndent(line) : ' '
122-
123-
lineElement.appendChild(indentElement)
124-
lineElement.appendChild(contentElement)
125-
source.appendChild(lineElement)
126-
})
66+
const serializedContent = sz.statementsToXML(statements)
67+
const source = myDocument.createElement('solid-panes-editor-card') as HTMLElement & {
68+
contentType?: string
69+
content?: string
70+
}
71+
source.contentType = 'application/rdf+xml'
72+
source.content = serializedContent
12773

12874
div.appendChild(source)
12975
return div
13076
}
13177
}
132-
133-
// ends

‎src/components/editor-card/EditorCard.styles.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
:host {
2+
display: block;
3+
width: 100%;
4+
height: 100%;
5+
6+
section {
7+
display: flex;
8+
flex-direction: column;
9+
width: 100%;
10+
height: 100%;
11+
min-height: 0;
12+
margin: 0;
13+
padding: 0px 40px 25px;
14+
}
15+
16+
.editor {
17+
flex: 1 1 auto;
18+
width: 100%;
19+
min-height: 0;
20+
}
21+
22+
@media (max-width: 768px) {
23+
section {
24+
padding: 0px 0px 25px;
25+
}
26+
}
27+
}

‎src/components/editor-card/EditorCard.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { html } from 'lit'
2+
import { customElement, property, query } from 'lit/decorators.js'
3+
import { WebComponent, type CodeEditor } from 'solid-ui'
4+
import styles from './EditorCard.styles.css'
5+
6+
@customElement('solid-panes-editor-card')
7+
export default class EditorCard extends WebComponent {
8+
static styles = styles
9+
10+
private _editor?: CodeEditor
11+
private _initializing = false
12+
13+
@query('.editor')
14+
accessor _editorMount: HTMLDivElement | null = null
15+
16+
@property()
17+
accessor contentType: string | undefined
18+
19+
@property()
20+
accessor content: string | undefined
21+
22+
getEditor () {
23+
return this._editor
24+
}
25+
26+
setReadOnly (readOnly: boolean) {
27+
this._editor?.setReadOnly(readOnly)
28+
}
29+
30+
private async _initializeEditor () {
31+
if (this._editor || this._initializing) return
32+
this._initializing = true
33+
const editorDiv = this._editorMount
34+
35+
if (!editorDiv) {
36+
this._initializing = false
37+
return
38+
}
39+
40+
try {
41+
const { CodeEditor } = await import('solid-ui')
42+
this._editor = new CodeEditor()
43+
try {
44+
await this._editor.initialize(editorDiv, this.content ?? '', this.contentType ?? '', 'dark')
45+
} catch (err) {
46+
throw new Error(`Error initializing code editor: ${err instanceof Error ? err.message : String(err)}`)
47+
}
48+
this._editor?.setReadOnly(true)
49+
} catch (err) {
50+
console.log('Error loading CodeEditor module:', err)
51+
} finally {
52+
this._initializing = false
53+
}
54+
}
55+
56+
async firstUpdated () {
57+
await this._initializeEditor()
58+
}
59+
60+
disconnectedCallback () {
61+
super.disconnectedCallback()
62+
if (this._editor) {
63+
this._editor.destroy()
64+
this._editor = undefined
65+
}
66+
67+
this._initializing = false
68+
}
69+
70+
render () {
71+
return html`
72+
<section class="editor-card">
73+
<div class="editor"></div>
74+
</section>
75+
`
76+
}
77+
}

‎src/n3Pane.css‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,6 @@
11
.n3-pane {
2-
padding: 1rem;
32
width: 100%;
43
min-width: 0;
5-
border-top: solid 1px var(--color-data-pane-border-top, black);
6-
border-left: solid 1px var(--color-data-pane-border-top, black);
7-
border-bottom: solid 1px var(--color-data-pane-border-side, #777);
8-
border-right: solid 1px var(--color-data-pane-border-side, #777);
9-
color: var(--color-text-blue, #004);
4+
border: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
105
box-sizing: border-box;
116
}
12-
13-
.n3-pane__source {
14-
overflow-x: auto;
15-
max-width: 100%;
16-
min-width: 0;
17-
box-sizing: border-box;
18-
font-family: monospace;
19-
font-size: 120%;
20-
margin: 0;
21-
white-space: pre;
22-
}
23-
24-
.n3-pane__line {
25-
white-space: pre;
26-
}
27-
28-
.n3-pane[data-layout='mobile'] .n3-pane__source {
29-
overflow-wrap: anywhere;
30-
word-break: break-word;
31-
white-space: normal;
32-
}
33-
34-
.n3-pane[data-layout='mobile'] .n3-pane__line {
35-
white-space: pre-wrap;
36-
padding-left: var(--n3-indent, 0);
37-
text-indent: calc(-1 * var(--n3-indent, 0));
38-
}
39-
40-
@media (max-width: 576px) {
41-
.n3-pane__source {
42-
overflow-wrap: anywhere;
43-
word-break: break-word;
44-
white-space: normal;
45-
}
46-
47-
.n3-pane__line {
48-
white-space: pre-wrap;
49-
padding-left: var(--n3-indent, 0);
50-
text-indent: calc(-1 * var(--n3-indent, 0));
51-
}
52-
}

0 commit comments

Comments
 (0)