@softwarity/geojson-editor 1.0.16 → 1.0.18

package/src/internal-types.ts

@@ -0,0 +1,111 @@
+import type { Feature, FeatureCollection } from 'geojson';
+
+/**
+ * Internal types - not exported publicly
+ */
+
+/** Position in the editor (line and column) */
+export interface CursorPosition {
+  line: number;
+  column: number;
+}
+
+/** Input types accepted by API methods */
+export type FeatureInput = Feature | Feature[] | FeatureCollection;
+
+/** Color metadata for a line */
+export interface ColorMeta {
+  attributeName: string;
+  color: string;
+}
+
+/** Boolean metadata for a line */
+export interface BooleanMeta {
+  attributeName: string;
+  value: boolean;
+}
+
+/** Collapse button metadata */
+export interface CollapseButtonMeta {
+  nodeKey: string;
+  nodeId: string;
+  isCollapsed: boolean;
+}
+
+/** Visibility button metadata */
+export interface VisibilityButtonMeta {
+  featureKey: string;
+  isHidden: boolean;
+}
+
+/** Line metadata */
+export interface LineMeta {
+  colors: ColorMeta[];
+  booleans: BooleanMeta[];
+  collapseButton: CollapseButtonMeta | null;
+  visibilityButton: VisibilityButtonMeta | null;
+  isHidden: boolean;
+  isCollapsed: boolean;
+  featureKey: string | null;
+}
+
+/** Visible line data */
+export interface VisibleLine {
+  index: number;
+  content: string;
+  meta: LineMeta | undefined;
+}
+
+/** Feature range in the editor */
+export interface FeatureRange {
+  startLine: number;
+  endLine: number;
+  featureIndex: number;
+}
+
+/** Node range info */
+export interface NodeRangeInfo {
+  startLine: number;
+  endLine: number;
+  nodeKey?: string;
+  isRootFeature?: boolean;
+}
+
+/** Collapsible range info */
+export interface CollapsibleRange extends NodeRangeInfo {
+  nodeId: string;
+  openBracket: string;
+}
+
+/** Editor state snapshot for undo/redo */
+export interface EditorSnapshot {
+  lines: string[];
+  cursorLine: number;
+  cursorColumn: number;
+  timestamp: number;
+}
+
+/** Bracket count result */
+export interface BracketCount {
+  open: number;
+  close: number;
+}
+
+/** Context stack item */
+export interface ContextStackItem {
+  context: string;
+  isArray: boolean;
+}
+
+/** Collapsed zone context for keydown handlers */
+export interface CollapsedZoneContext {
+  inCollapsedZone: CollapsedNodeInfo | null;
+  onCollapsedNode: CollapsedNodeInfo | null;
+  onClosingLine: CollapsedNodeInfo | null;
+}
+
+/** Collapsed node info with nodeId */
+export interface CollapsedNodeInfo extends NodeRangeInfo {
+  nodeId: string;
+  isCollapsed?: boolean;
+}

package/src/syntax-highlighter.ts

@@ -0,0 +1,197 @@
+import type { LineMeta } from './internal-types.js';
+import {
+  GEOJSON_KEYS,
+  GEOMETRY_TYPES,
+  RE_COLLAPSED_BRACKET,
+  RE_COLLAPSED_ROOT,
+  RE_ESCAPE_AMP,
+  RE_ESCAPE_LT,
+  RE_ESCAPE_GT,
+  RE_PUNCTUATION,
+  RE_JSON_KEYS,
+  RE_TYPE_VALUES,
+  RE_STRING_VALUES,
+  RE_COLOR_HEX,
+  RE_NUMBERS_COLON,
+  RE_NUMBERS_ARRAY,
+  RE_NUMBERS_START,
+  RE_BOOLEANS,
+  RE_NULL,
+  RE_UNRECOGNIZED,
+  RE_WHITESPACE_ONLY,
+  RE_WHITESPACE_SPLIT
+} from './constants.js';
+
+// CSS named colors (147 colors, ~1.2KB) - format: ,color1,color2,...,
+// Using string with indexOf for O(n) lookup, simpler than Set
+const CSS_COLORS = ',aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta,darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey,honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow,lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid,palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen,';
+
+// Reusable DOM element for color conversion (getComputedStyle)
+let _colorTestEl: HTMLElement | null = null;
+
+/**
+ * Get or create the color test element (lazy initialization)
+ */
+function getColorTestEl(): HTMLElement {
+  if (!_colorTestEl) {
+    _colorTestEl = document.createElement('div');
+    _colorTestEl.style.display = 'none';
+    document.body.appendChild(_colorTestEl);
+  }
+  return _colorTestEl;
+}
+
+/**
+ * Check if a string is a valid CSS named color
+ */
+export function isNamedColor(value: string): boolean {
+  return CSS_COLORS.includes(',' + value.toLowerCase() + ',');
+}
+
+/**
+ * Convert a named CSS color to hex using browser's getComputedStyle
+ */
+export function namedColorToHex(colorName: string): string | null {
+  const el = getColorTestEl();
+  el.style.color = colorName;
+
+  // Get computed color (browser returns rgb(r, g, b) or rgba(r, g, b, a))
+  const computed = getComputedStyle(el).color;
+  if (!computed) return null;
+
+  // Parse rgb(r, g, b) or rgba(r, g, b, a)
+  const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (!match) return null;
+  const [ ,rd, gd, bd ] = match;
+
+  // Convert to hex
+  const r = parseInt(rd, 10).toString(16).padStart(2, '0');
+  const g = parseInt(gd, 10).toString(16).padStart(2, '0');
+  const b = parseInt(bd, 10).toString(16).padStart(2, '0');
+
+  return '#' + r + g + b;
+}
+
+/**
+ * Apply syntax highlighting to a line of JSON text
+ * Returns HTML with syntax highlighting spans
+ */
+export function highlightSyntax(text: string, context: string, meta: LineMeta | undefined): string {
+  if (!text) return '';
+
+  // For collapsed nodes, truncate the text at the opening bracket
+  let displayText = text;
+  let collapsedBracket: string | null = null;
+
+  if (meta?.collapseButton?.isCollapsed) {
+    // Match "key": { or "key": [
+    const bracketMatch = text.match(RE_COLLAPSED_BRACKET);
+    // Also match standalone { or [ (root Feature objects)
+    const rootMatch = !bracketMatch && text.match(RE_COLLAPSED_ROOT);
+
+    if (bracketMatch) {
+      displayText = bracketMatch[1] + bracketMatch[2];
+      collapsedBracket = bracketMatch[2];
+    } else if (rootMatch) {
+      displayText = rootMatch[1] + rootMatch[2];
+      collapsedBracket = rootMatch[2];
+    }
+  }
+
+  // Escape HTML first
+  let result = displayText
+    .replace(RE_ESCAPE_AMP, '&')
+    .replace(RE_ESCAPE_LT, '<')
+    .replace(RE_ESCAPE_GT, '>');
+
+  // Punctuation FIRST (before other replacements can interfere)
+  result = result.replace(RE_PUNCTUATION, '<span class="json-punctuation">$1</span>');
+
+  // JSON keys - match "key" followed by :
+  // In properties context, all keys are treated as regular JSON keys
+  RE_JSON_KEYS.lastIndex = 0;
+  result = result.replace(RE_JSON_KEYS, (_match, key, colon) => {
+    if (context !== 'properties' && GEOJSON_KEYS.includes(key)) {
+      return `<span class="geojson-key">"${key}"</span>${colon}`;
+    }
+    return `<span class="json-key">"${key}"</span>${colon}`;
+  });
+
+  // Type values - "type": "Value" - but NOT inside properties context
+  if (context !== 'properties') {
+    RE_TYPE_VALUES.lastIndex = 0;
+    result = result.replace(RE_TYPE_VALUES, (_match, space, type) => {
+      const isValid = type === 'Feature' || type === 'FeatureCollection' || GEOMETRY_TYPES.includes(type);
+      const cls = isValid ? 'geojson-type' : 'geojson-type-invalid';
+      return `<span class="geojson-key">"type"</span><span class="json-punctuation">:</span>${space}<span class="${cls}">"${type}"</span>`;
+    });
+  }
+
+  // String values (not already wrapped in spans)
+  RE_STRING_VALUES.lastIndex = 0;
+  result = result.replace(RE_STRING_VALUES, (match, colon, space, val) => {
+    if (match.includes('geojson-type') || match.includes('json-string')) return match;
+    // Check for hex color (#fff or #ffffff)
+    if (RE_COLOR_HEX.test(val)) {
+      return `${colon}${space}<span class="json-string json-color" data-color="${val}" style="--swatch-color: ${val}">"${val}"</span>`;
+    }
+    // Check for named CSS color (red, blue, etc.) - uses cached browser validation
+    if (isNamedColor(val)) {
+      // Use the named color directly for swatch, browser handles it
+      return `${colon}${space}<span class="json-string json-color" data-color="${val}" style="--swatch-color: ${val}">"${val}"</span>`;
+    }
+    return `${colon}${space}<span class="json-string">"${val}"</span>`;
+  });
+
+  // Numbers after colon
+  RE_NUMBERS_COLON.lastIndex = 0;
+  result = result.replace(RE_NUMBERS_COLON, '$1$2<span class="json-number">$3</span>');
+
+  // Numbers in arrays (after [ or ,)
+  RE_NUMBERS_ARRAY.lastIndex = 0;
+  result = result.replace(RE_NUMBERS_ARRAY, '$1$2<span class="json-number">$3</span>');
+
+  // Standalone numbers at start of line (coordinates arrays)
+  RE_NUMBERS_START.lastIndex = 0;
+  result = result.replace(RE_NUMBERS_START, '$1<span class="json-number">$2</span>');
+
+  // Booleans - use ::before for checkbox via CSS class
+  RE_BOOLEANS.lastIndex = 0;
+  result = result.replace(RE_BOOLEANS, (_match, colon, space, val) => {
+    const checkedClass = val === 'true' ? ' json-bool-true' : ' json-bool-false';
+    return `${colon}${space}<span class="json-boolean${checkedClass}">${val}</span>`;
+  });
+
+  // Null
+  RE_NULL.lastIndex = 0;
+  result = result.replace(RE_NULL, '$1$2<span class="json-null">$3</span>');
+
+  // Collapsed bracket indicator
+  if (collapsedBracket) {
+    const bracketClass = collapsedBracket === '[' ? 'collapsed-bracket-array' : 'collapsed-bracket-object';
+    result = result.replace(
+      new RegExp(`<span class="json-punctuation">\\${collapsedBracket}<\\/span>$`),
+      `<span class="${bracketClass}">${collapsedBracket}</span>`
+    );
+  }
+
+  // Mark unrecognized text as error
+  RE_UNRECOGNIZED.lastIndex = 0;
+  result = result.replace(RE_UNRECOGNIZED, (match, before, text, after) => {
+    if (!text || RE_WHITESPACE_ONLY.test(text)) return match;
+    // Check for unrecognized words/tokens (not whitespace, not just spaces/commas)
+    // Keep whitespace as-is, wrap any non-whitespace unrecognized token
+    const parts: string[] = text.split(RE_WHITESPACE_SPLIT);
+    let hasError = false;
+    const processed = parts.map(part => {
+      // If it's whitespace, keep it
+      if (RE_WHITESPACE_ONLY.test(part)) return part;
+      // Mark as error
+      hasError = true;
+      return `<span class="json-error">${part}</span>`;
+    }).join('');
+    return hasError ? before + processed + after : match;
+  });
+
+  return result;
+}

package/src/types.ts

@@ -0,0 +1,48 @@
+import type { Feature } from 'geojson';
+
+/**
+ * Public types - exported from the package
+ */
+
+/** Options for set/add/insertAt/open methods */
+export interface SetOptions {
+  /**
+   * Attributes to collapse after loading.
+   * - string[]: List of attribute names (e.g., ['coordinates', 'geometry'])
+   * - function: Dynamic function (feature, index) => string[]
+   * - '$root': Special keyword to collapse entire features
+   * - Empty array: No auto-collapse
+   * @default ['coordinates']
+   */
+  collapsed?: string[] | ((feature: Feature | null, index: number) => string[]);
+}
+
+/** Theme configuration */
+export interface ThemeConfig {
+  bgColor?: string;
+  textColor?: string;
+  caretColor?: string;
+  gutterBg?: string;
+  gutterBorder?: string;
+  gutterText?: string;
+  jsonKey?: string;
+  jsonString?: string;
+  jsonNumber?: string;
+  jsonBoolean?: string;
+  jsonNull?: string;
+  jsonPunct?: string;
+  jsonError?: string;
+  controlColor?: string;
+  controlBg?: string;
+  controlBorder?: string;
+  geojsonKey?: string;
+  geojsonType?: string;
+  geojsonTypeInvalid?: string;
+  jsonKeyInvalid?: string;
+}
+
+/** Theme settings for dark and light modes */
+export interface ThemeSettings {
+  dark?: ThemeConfig;
+  light?: ThemeConfig;
+}

package/src/utils.ts

@@ -0,0 +1,59 @@
+import type { Feature } from 'geojson';
+import type { BracketCount } from './internal-types.js';
+
+/**
+ * Alias for document.createElement - optimized for minification
+ */
+export const createElement = (tag: string): HTMLElement => document.createElement(tag);
+
+/**
+ * Generate a unique feature key from a feature object
+ * Uses id, properties.id, or a hash of geometry coordinates
+ */
+export function getFeatureKey(feature: Feature | null): string | null {
+  if (!feature) return null;
+  if (feature.id !== undefined) return `id:${feature.id}`;
+  if (feature.properties?.id !== undefined) return `prop:${feature.properties.id}`;
+
+  const geomType = feature.geometry?.type || 'null';
+  const geom = feature.geometry as { coordinates?: unknown } | null;
+  const coords = JSON.stringify(geom?.coordinates || []);
+  let hash = 0;
+  for (let i = 0; i < coords.length; i++) {
+    hash = ((hash << 5) - hash) + coords.charCodeAt(i);
+    hash = hash & hash;
+  }
+  return `hash:${geomType}:${hash.toString(36)}`;
+}
+
+/**
+ * Count open and close brackets in a line
+ * Handles string escaping properly
+ */
+export function countBrackets(line: string, openBracket: string): BracketCount {
+  const closeBracket = openBracket === '{' ? '}' : ']';
+  let open = 0, close = 0, inString = false, escape = false;
+
+  for (const char of line) {
+    if (escape) { escape = false; continue; }
+    if (char === '\\' && inString) { escape = true; continue; }
+    if (char === '"') { inString = !inString; continue; }
+    if (!inString) {
+      if (char === openBracket) open++;
+      if (char === closeBracket) close++;
+    }
+  }
+
+  return { open, close };
+}
+
+/**
+ * Parse a CSS selector to a :host rule for shadow DOM
+ */
+export function parseSelectorToHostRule(selector: string | null): string {
+  if (!selector) return ':host([data-color-scheme="dark"])';
+  if (selector.startsWith('.') && !selector.includes(' ')) {
+    return `:host(${selector})`;
+  }
+  return `:host-context(${selector})`;
+}

package/src/validation.ts

@@ -0,0 +1,90 @@
+import type { Feature, FeatureCollection } from 'geojson';
+import { GEOMETRY_TYPES, type GeometryType } from './constants.js';
+
+/**
+ * Validate a parsed FeatureCollection and return any errors
+ */
+export function validateGeoJSON(parsed: FeatureCollection): string[] {
+  const errors: string[] = [];
+
+  if (!parsed.features) return errors;
+
+  parsed.features.forEach((feature, i) => {
+    if (feature.type !== 'Feature') {
+      errors.push(`features[${i}]: type must be "Feature"`);
+    }
+    if (feature.geometry && feature.geometry.type) {
+      if (!GEOMETRY_TYPES.includes(feature.geometry.type as GeometryType)) {
+        errors.push(`features[${i}].geometry: invalid type "${feature.geometry.type}"`);
+      }
+    }
+  });
+
+  return errors;
+}
+
+/**
+ * Validate a single feature object
+ * @throws Error if the feature is invalid
+ */
+export function validateFeature(feature: Feature): void {
+  if (!feature || typeof feature !== 'object') {
+    throw new Error('Feature must be an object');
+  }
+  if (feature.type !== 'Feature') {
+    throw new Error('Feature type must be "Feature"');
+  }
+  if (!('geometry' in feature)) {
+    throw new Error('Feature must have a geometry property');
+  }
+  if (!('properties' in feature)) {
+    throw new Error('Feature must have a properties property');
+  }
+  if (feature.geometry !== null) {
+    if (typeof feature.geometry !== 'object') {
+      throw new Error('Feature geometry must be an object or null');
+    }
+    if (!feature.geometry.type) {
+      throw new Error('Feature geometry must have a type');
+    }
+    if (!GEOMETRY_TYPES.includes(feature.geometry.type as GeometryType)) {
+      throw new Error(`Invalid geometry type: "${feature.geometry.type}"`);
+    }
+    if (!('coordinates' in feature.geometry)) {
+      throw new Error('Feature geometry must have coordinates');
+    }
+  }
+  if (feature.properties !== null && typeof feature.properties !== 'object') {
+    throw new Error('Feature properties must be an object or null');
+  }
+}
+
+/**
+ * Normalize input to an array of features
+ * Accepts: FeatureCollection, Feature[], or single Feature
+ * @throws Error if input is invalid
+ */
+export function normalizeToFeatures(input: Feature | Feature[] | FeatureCollection): Feature[] {
+  let features: Feature[] = [];
+
+  if (Array.isArray(input)) {
+    features = input;
+  } else if (input && typeof input === 'object') {
+    if (input.type === 'FeatureCollection' && 'features' in input && Array.isArray(input.features)) {
+      features = input.features;
+    } else if (input.type === 'Feature') {
+      features = [input as Feature];
+    } else {
+      throw new Error('Input must be a Feature, array of Features, or FeatureCollection');
+    }
+  } else {
+    throw new Error('Input must be a Feature, array of Features, or FeatureCollection');
+  }
+
+  // Validate each feature
+  for (const feature of features) {
+    validateFeature(feature);
+  }
+
+  return features;
+}