Editor card - plus add to rdfxml and n3

package.json

@@ -59,7 +59,7 @@
     "@solid/better-simple-slideshow": "^0.1.0",
     "activitystreams-pane": "1.0.3-4",
     "chat-pane": "3.0.4-3",
-    "contacts-pane": "3.2.1-5",
+    "contacts-pane": "3.2.1-6",
     "dompurify": "^3.4.4",
     "folder-pane": "3.1.1-3",
     "issue-pane": "3.0.3-1",
@@ -70,10 +70,10 @@
     "pane-registry": "3.1.2-2",
     "profile-pane": "3.2.3-4",
     "rdflib": "2.4.0",
-    "solid-logic": "4.0.8-2",
+    "solid-logic": "4.0.8-3",
     "solid-namespace": "^0.5.4",
-    "solid-ui": "3.1.3-15",
-    "source-pane": "3.1.1-6"
+    "solid-ui": "3.1.3-17",
+    "source-pane": "3.1.1-7"
   },
   "overrides": {
     "rdflib": "$rdflib"

src/RDFXMLPane.css

@@ -1,74 +1,6 @@
 .rdfxml-pane {
-	padding: 1rem;
 	width: 100%;
 	min-width: 0;
-	border-top: solid 2px var(--color-data-pane-border-top, black);
-	border-left: solid 2px var(--color-data-pane-border-top, black);
-	border-bottom: solid 2px var(--color-data-pane-border-side, #777);
-	border-right: solid 2px var(--color-data-pane-border-side, #777);
-	color: var(--color-text-brown, #440);
+	border: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
 	box-sizing: border-box;
 }
-
-.rdfxml-pane__source {
-	overflow-x: auto;
-	max-width: 100%;
-	min-width: 0;
-	box-sizing: border-box;
-	font-family: monospace;
-	font-size: 120%;
-	margin: 0;
-	white-space: pre;
-}
-
-.rdfxml-pane__line {
-	display: grid;
-	grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
-	align-items: start;
-	min-width: 0;
-}
-
-.rdfxml-pane__line-indent {
-	display: block;
-	width: var(--rdfxml-indent, 0);
-}
-
-.rdfxml-pane__line-content {
-	white-space: pre;
-}
-
-.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__source {
-	overflow-wrap: anywhere;
-	word-break: break-word;
-	white-space: normal;
-}
-
-.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line {
-	grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
-}
-
-.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line-content {
-	white-space: pre-wrap;
-	overflow-wrap: anywhere;
-	word-break: break-word;
-	min-width: 0;
-}
-
-@media (max-width: 576px) {
-	.rdfxml-pane__source {
-		overflow-wrap: anywhere;
-		word-break: break-word;
-		white-space: normal;
-	}
-
-	.rdfxml-pane__line {
-		grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
-	}
-
-	.rdfxml-pane__line-content {
-		white-space: pre-wrap;
-		overflow-wrap: anywhere;
-		word-break: break-word;
-		min-width: 0;
-	}
-}

src/RDFXMLPane.ts

@@ -5,13 +5,11 @@
  ** in generated N3 syntax.
  */
 
-import * as UI from 'solid-ui'
-import * as $rdf from 'rdflib'
-import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
-import type { NamedNode, Statement } from 'rdflib'
+import { ns, icons } from 'solid-ui'
+import type { DataBrowserContext } from 'pane-registry'
+import { Serializer, type NamedNode, type Statement } from 'rdflib'
 import './RDFXMLPane.css'
-
-const ns = UI.ns
+import './components/editor-card/EditorCard'
 
 type RDFXMLPaneDefinition = {
   icon: string
@@ -21,32 +19,8 @@ type RDFXMLPaneDefinition = {
   render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement
 }
 
-function leadingIndentWidth (line: string): number {
-  if (line.trim().length === 0) {
-    return 0
-  }
-
-  let width = 0
-  for (const character of line) {
-    if (character === ' ') {
-      width += 1
-      continue
-    }
-    if (character === '\t') {
-      width += 2
-      continue
-    }
-    break
-  }
-  return Math.max(width, 2)
-}
-
-function trimLeadingIndent (line: string): string {
-  return line.replace(/^[ \t]+/, '')
-}
-
 export const RDFXMLPane: RDFXMLPaneDefinition = {
-  icon: UI.icons.originalIconBase + '22-text-xml4.png',
+  icon: icons.originalIconBase + '22-text-xml4.png',
 
   name: 'RDFXML',
 
@@ -74,60 +48,30 @@ export const RDFXMLPane: RDFXMLPaneDefinition = {
     const myDocument = context.dom
     const kb = context.session.store
 
-    function applyEnvironmentAttributes (element: HTMLDivElement): void {
-      const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
-      element.dataset.layout = environment.layout ?? 'desktop'
-    }
-
     const div = myDocument.createElement('div')
     div.setAttribute('class', 'rdfxml-pane')
-    applyEnvironmentAttributes(div)
     // Because of smushing etc, this will not be a copy of the original source
     // We could instead either fetch and re-parse the source,
     // or we could keep all the pre-smushed triples.
-    const sts = kb.statementsMatching(
+    const statements = kb.statementsMatching(
       undefined,
       undefined,
       undefined,
       subject
-    ) as Statement[] // @@ slow with current store!
-    /*
-    var kludge = kb.formula([]) // No features
-    for (var i=0; i< sts.length; i++) {
-        s = sts[i]
-        kludge.add(s.subject, s.predicate, s.object)
-    }
-    */
-    const sz = $rdf.Serializer(kb)
+    ) as Statement[]
+
+    const sz = Serializer(kb)
     sz.suggestNamespaces(kb.namespaces)
     sz.setBase(subject.uri)
-    const str = sz.statementsToXML(sts)
-    const source = myDocument.createElement('div')
-    source.classList.add('rdfxml-pane__source')
-
-    str.split('\n').forEach(line => {
-      const lineElement = myDocument.createElement('div')
-      const indentElement = myDocument.createElement('span')
-      const contentElement = myDocument.createElement('span')
-      const indentWidth = leadingIndentWidth(line)
-
-      lineElement.classList.add('rdfxml-pane__line')
-      lineElement.style.setProperty('--rdfxml-indent', `${indentWidth}ch`)
-
-      indentElement.classList.add('rdfxml-pane__line-indent')
-      indentElement.setAttribute('aria-hidden', 'true')
-
-      contentElement.classList.add('rdfxml-pane__line-content')
-      contentElement.textContent = line.length > 0 ? trimLeadingIndent(line) : ' '
-
-      lineElement.appendChild(indentElement)
-      lineElement.appendChild(contentElement)
-      source.appendChild(lineElement)
-    })
+    const serializedContent = sz.statementsToXML(statements)
+    const source = myDocument.createElement('solid-panes-editor-card') as HTMLElement & {
+      contentType?: string
+      content?: string
+    }
+    source.contentType = 'application/rdf+xml'
+    source.content = serializedContent
 
     div.appendChild(source)
     return div
   }
 }
-
-// ends

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

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    margin: 0;
+    padding: 0px 40px 25px;
+  }
+
+  .editor {
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 0;
+  }
+
+  @media (max-width: 768px) {
+    section {
+      padding: 0px 0px 25px;
+    }
+  }
+}

src/components/editor-card/EditorCard.ts

@@ -0,0 +1,77 @@
+import { html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { WebComponent, type CodeEditor } from 'solid-ui'
+import styles from './EditorCard.styles.css'
+
+@customElement('solid-panes-editor-card')
+export default class EditorCard extends WebComponent {
+  static styles = styles
+
+  private _editor?: CodeEditor
+  private _initializing = false
+
+  @query('.editor')
+  accessor _editorMount: HTMLDivElement | null = null
+
+  @property()
+  accessor contentType: string | undefined
+
+  @property()
+  accessor content: string | undefined
+
+  getEditor () {
+    return this._editor
+  }
+
+  setReadOnly (readOnly: boolean) {
+    this._editor?.setReadOnly(readOnly)
+  }
+
+  private async _initializeEditor () {
+    if (this._editor || this._initializing) return
+    this._initializing = true
+    const editorDiv = this._editorMount
+
+    if (!editorDiv) {
+      this._initializing = false
+      return
+    }
+
+    try {
+      const { CodeEditor } = await import('solid-ui')
+      this._editor = new CodeEditor()
+      try {
+        await this._editor.initialize(editorDiv, this.content ?? '', this.contentType ?? '', 'dark')
+      } catch (err) {
+        throw new Error(`Error initializing code editor: ${err instanceof Error ? err.message : String(err)}`)
+      }
+      this._editor?.setReadOnly(true)
+    } catch (err) {
+      console.log('Error loading CodeEditor module:', err)
+    } finally {
+      this._initializing = false
+    }
+  }
+
+  async firstUpdated () {
+    await this._initializeEditor()
+  }
+
+  disconnectedCallback () {
+    super.disconnectedCallback()
+    if (this._editor) {
+      this._editor.destroy()
+      this._editor = undefined
+    }
+
+    this._initializing = false
+  }
+
+  render () {
+    return html`
+      <section class="editor-card">
+        <div class="editor"></div>
+      </section>
+    `
+  }
+}

src/n3Pane.css

@@ -1,52 +1,6 @@
 .n3-pane {
-	padding: 1rem;
 	width: 100%;
 	min-width: 0;
-	border-top: solid 1px var(--color-data-pane-border-top, black);
-	border-left: solid 1px var(--color-data-pane-border-top, black);
-	border-bottom: solid 1px var(--color-data-pane-border-side, #777);
-	border-right: solid 1px var(--color-data-pane-border-side, #777);
-	color: var(--color-text-blue, #004);
+	border: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
 	box-sizing: border-box;
 }
-
-.n3-pane__source {
-	overflow-x: auto;
-	max-width: 100%;
-	min-width: 0;
-	box-sizing: border-box;
-	font-family: monospace;
-	font-size: 120%;
-	margin: 0;
-	white-space: pre;
-}
-
-.n3-pane__line {
-	white-space: pre;
-}
-
-.n3-pane[data-layout='mobile'] .n3-pane__source {
-	overflow-wrap: anywhere;
-	word-break: break-word;
-	white-space: normal;
-}
-
-.n3-pane[data-layout='mobile'] .n3-pane__line {
-	white-space: pre-wrap;
-	padding-left: var(--n3-indent, 0);
-	text-indent: calc(-1 * var(--n3-indent, 0));
-}
-
-@media (max-width: 576px) {
-	.n3-pane__source {
-		overflow-wrap: anywhere;
-		word-break: break-word;
-		white-space: normal;
-	}
-
-	.n3-pane__line {
-		white-space: pre-wrap;
-		padding-left: var(--n3-indent, 0);
-		text-indent: calc(-1 * var(--n3-indent, 0));
-	}
-}