semantic-wrap이란?

npm install @semantic-wrap/core @semantic-wrap/react @semantic-wrap/ko react react-dom

import { koTitleModel } from "@semantic-wrap/ko";
import { SemanticWrap } from "@semantic-wrap/react";

export function Title({ children }: { children: string }) {
  return (
    <SemanticWrap model={koTitleModel}>
      <h1 className="title">{children}</h1>
    </SemanticWrap>
  );
}

import { selectLineBreaks } from "@semantic-wrap/core";
import { koTitleModel } from "@semantic-wrap/ko";

const canvas = document.createElement("canvas");
const canvasContext = canvas.getContext("2d")!;
canvasContext.font = "700 28px system-ui";

const result = selectLineBreaks({
  text: "더 나은 사용자 경험을 만드는 방법",
  model: koTitleModel,
  maxWidth: 320,
  measureText: (text) => canvasContext.measureText(text).width,
});

console.log(result.lines);
// ["더 나은 사용자 경험을", "만드는 방법"]

const plan = createLineBreakPlan({ text, model, strategy });

plan.predict();
plan.aggregate();
plan.calculate({ maxWidth, measureText });
plan.select({ maxWidth, measureText, nativeLayout });

import {
  createBudouxPredictor,
  definePhraseModel,
  selectLineBreaks,
} from "@semantic-wrap/core";

const canvasContext = document.createElement("canvas").getContext("2d")!;
canvasContext.font = "700 28px system-ui";

const colonTitleModel = definePhraseModel({
  boundaryMode: "spaces",
  levels: [
    {
      name: "after-colon",
      predictor: createBudouxPredictor({ UW3: { ":": 100 } }),
      penalty: 0,
    },
  ],
  fallbackPenalty: 1,
});

const result = selectLineBreaks({
  text: "서비스 업데이트: 새로운 기능을 사용하는 방법",
  model: colonTitleModel,
  maxWidth: 400,
  measureText: (value) => canvasContext.measureText(value).width,
});

console.log(result.lines);
// ["서비스 업데이트:", "새로운 기능을 사용하는 방법"]

import { definePhraseModel } from "@semantic-wrap/core";

const editorialModel = definePhraseModel({
  boundaryMode: "spaces",
  levels: [
    {
      name: "after-colon",
      predictor: {
        predict: (text) =>
          [...text.matchAll(/:\s/gu)].map((match) => match.index + 1),
      },
      penalty: 0,
    },
  ],
  fallbackPenalty: 1,
});

import {
  balance,
  consensus,
  createLineBreakStrategy,
  greedy,
} from "@semantic-wrap/core";

const consensusStrategy = createLineBreakStrategy({
  aggregate: consensus({ minimumModels: 2 }),
  select: balance({ tolerance: 0.12 }),
});

const greedyStrategy = createLineBreakStrategy({
  calculate: greedy(),
});

import {
  createLineBreakStrategy,
  selectLineBreaks,
  type LineBreakCalculator,
} from "@semantic-wrap/core";
import { koTitleModel } from "@semantic-wrap/ko";

const canvasContext = document.createElement("canvas").getContext("2d")!;
canvasContext.font = "700 28px system-ui";

const twoLineTitleCalculator: LineBreakCalculator = ({
  text,
  candidates,
  maxWidth,
  measureText,
}) => {
  let best: { offset: number; score: number } | undefined;

  for (const candidate of candidates) {
    const firstLine = text.slice(0, candidate.offset).trimEnd();
    const lastLine = text.slice(candidate.offset).trimStart();
    const firstWidth = measureText(firstLine);
    const lastWidth = measureText(lastLine);

    if (firstWidth > maxWidth || lastWidth > maxWidth) continue;
    if (lastLine.split(/\s+/u).length < 2) continue;

    const imbalance = Math.abs(firstWidth - lastWidth) / maxWidth;
    const score = candidate.penalty + imbalance;
    if (!best || score < best.score) {
      best = { offset: candidate.offset, score };
    }
  }

  return [{ breaks: best ? [best.offset] : [] }];
};

const twoLineTitleStrategy = createLineBreakStrategy({
  calculate: twoLineTitleCalculator,
});

const input = {
  text: "좋은 사용자 경험을 만들기 위해 놓치지 말아야 할 기준",
  model: koTitleModel,
  maxWidth: 360,
  measureText: (value: string) => canvasContext.measureText(value).width,
};

console.log(selectLineBreaks(input).lines);
// ["좋은 사용자 경험을 만들기", "위해 놓치지 말아야 할 기준"]

console.log(selectLineBreaks(input, { strategy: twoLineTitleStrategy }).lines);
// ["좋은 사용자 경험을 만들기 위해", "놓치지 말아야 할 기준"]

const result = selectLineBreaks(
  {
    text: "더 나은 사용자",
    model: koTitleModel,
    maxWidth: 320,
    measureText: (text) => canvasContext.measureText(text).width,
  },
  { diagnostics: true },
);

console.log(result.diagnostics.predictions);
console.log(result.diagnostics.candidates);

<SemanticWrap initial="native" resize="settled" model={koTitleModel}>
  <h1>{title}</h1>
</SemanticWrap>

import { Text } from "@chakra-ui/react";
import { koTitleModel } from "@semantic-wrap/ko";
import { SemanticWrap } from "@semantic-wrap/react";

<SemanticWrap model={koTitleModel}>
  <Text textStyle="heading2">{title}</Text>
</SemanticWrap>

import { createLineBreakStrategy, greedy } from "@semantic-wrap/core";
import { koTitleModel } from "@semantic-wrap/ko";
import { SemanticWrap } from "@semantic-wrap/react";

const greedyStrategy = createLineBreakStrategy({
  calculate: greedy(),
});

<SemanticWrap model={koTitleModel} strategy={greedyStrategy}>
  <h2 className="text-3xl font-bold leading-tight">{title}</h2>
</SemanticWrap>

import { koTitleModel } from "@semantic-wrap/ko";
import { useSemanticWrap } from "@semantic-wrap/react";

export function BreakPreview({ title }: { title: string }) {
  const { ref, selection } = useSemanticWrap({
    text: title,
    model: koTitleModel,
  });
  const preview = selection ? selection.lines.join(" / ") : title;

  return <h1 ref={ref}>{preview}</h1>;
}

import { koTitleModel } from "@semantic-wrap/ko";
import { enTitleModel } from "@semantic-wrap/en";

bun install
bun run check