@puzzlelabs/puzzle-glossary-react

Puzzle Glossary

Puzzle Labs is an AI content workflow engine. It lies at the intersection of people, processes, and technology used to improve teams’ content workflows. Teams get a 10x accelerating boost to their content operations processes by using Puzzle.

Recommended Install

npm install @puzzlelabs/puzzle-glossary @puzzlelabs/puzzle-glossary-react

Highlight Widget Example

import {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import {HighlightZone} from "@puzzlelabs/puzzle-glossary-react";
import {highlightWidgetManager} from "@puzzlelabs/puzzle-glossary";
import {defineCustomElements} from '@puzzlelabs/puzzle-glossary/dist/loader';

defineCustomElements();

const App = () => (
  <HighlightZone as='p'>
    Search openai We are on the verge of a creative renaissance.
  </HighlightZone>
);

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <App/>
  </StrictMode>
);

// For react you not needed specify selectors
highlightWidgetManager.config = {
  hasMarkAll: true,
  puzzleBranding: true,
  hasMarkHyperlink: true,
  callToAction: {
    text: 'CTA',
    link: 'https://puzzlelabs.ai',
  },
};

highlightWidgetManager.theme = {
  mode: 'light',
  // fontFamily: 'Inter',
  // marker: {
  //   color: 'black',
  //   type: 'highlight',
  // },
  // resource: {
  //   color: 'black',
  // },
  // callToAction: {
  //     color: 'black',
  //     backgroundColor: 'black',
  // },
  // modal: {
  //     primaryColor: 'black',
  //     secondaryColor: 'black',
  //     backgroundColor: 'black',
  // }
};

highlightWidgetManager.handlers = {
  onCopyClick: console.log,
  onMarkerHover: console.log,
  onMarkerClick: console.log,
  onResourceClick: console.log,
  onCtaClick: console.log,
  onEvent: console.log,
}

// For react you need call only init without mark
highlightWidgetManager.init('6437d691b3c98451b429460f');

Page Widget Example

import './index.css';
import {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import {PageWidget} from "@puzzlelabs/puzzle-glossary-react";
import {defineCustomElements} from '@puzzlelabs/puzzle-glossary/dist/loader';

defineCustomElements();

// For remix use this method of component initialization
// import {defineCustomElementsFromUnPkg} from "@puzzlelabs/puzzle-glossary";
// defineCustomElementsFromUnPkg();

const PageWidgetExample = () => (
  <PageWidget apiKey='6437d691b3c98451b429460f'/>
)

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <PageWidgetExample/>
  </StrictMode>
);