@bigbluebutton/tldraw 2.0.0-alpha.29 → 2.0.0-alpha.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist-cjs/lib/shapes/poll/PollShapeUtil.js +5 -3
  2. package/dist-cjs/lib/shapes/poll/PollShapeUtil.js.map +2 -2
  3. package/dist-cjs/lib/shapes/poll/components/poll-content.js +12 -2
  4. package/dist-cjs/lib/shapes/poll/components/poll-content.js.map +2 -2
  5. package/dist-cjs/lib/shapes/poll/poll-shape-types.js.map +1 -1
  6. package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs +5 -3
  7. package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs.map +2 -2
  8. package/dist-esm/lib/shapes/poll/components/poll-content.mjs +12 -2
  9. package/dist-esm/lib/shapes/poll/components/poll-content.mjs.map +2 -2
  10. package/package.json +2 -2
  11. package/src/lib/shapes/poll/PollShapeUtil.tsx +7 -3
  12. package/src/lib/shapes/poll/components/poll-content.tsx +16 -2
  13. package/src/lib/shapes/poll/poll-shape-types.ts +1 -0
package/dist-cjs/lib/shapes/poll/PollShapeUtil.js CHANGED
@@ -66,7 +66,8 @@ class PollShapeUtil extends import_editor.ShapeUtil {
66
66
  });
67
67
  }
68
68
  component(shape) {
69
- const { bounds } = this.editor.getShapeGeometry(shape);
69
+ const width = shape.props.w > 0 ? shape.props.w : 300;
70
+ const height = shape.props.h > 0 ? shape.props.h : 300;
70
71
  const theme = (0, import_editor.getDefaultColorTheme)({
71
72
  isDarkMode: this.editor.user.getIsDarkMode()
72
73
  });
@@ -79,7 +80,7 @@ class PollShapeUtil extends import_editor.ShapeUtil {
79
80
  questionType: shape.props.questionType,
80
81
  answers: shape.props.answers
81
82
  });
82
- const adjustedHeight = shape.props.questionText.length > 0 ? bounds.height - 75 : bounds.height;
83
+ const adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height;
83
84
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
85
  import_editor.HTMLContainer,
85
86
  {
@@ -100,7 +101,8 @@ class PollShapeUtil extends import_editor.ShapeUtil {
100
101
  "div",
101
102
  {
102
103
  style: {
103
- width: `${bounds.width}px`,
104
+ width: `${width}px`,
105
+ height: `${height}px`,
104
106
  overflow: "hidden",
105
107
  position: "relative"
106
108
  },
package/dist-cjs/lib/shapes/poll/PollShapeUtil.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/shapes/poll/PollShapeUtil.tsx"],
4
- "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\tconst { bounds } = this.editor.getShapeGeometry(shape)\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? bounds.height - 75 : bounds.height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${bounds.width}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4FK;AA5FL,oBAOO;AAEP,0BAA4B;AAC5B,mCAAoC;AACpC,8BAA+B;AAGxB,MAAM,sBAAsB,wBAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,0BAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAC5B,UAAM,EAAE,OAAO,IAAI,KAAK,OAAO,iBAAiB,KAAK;AACrD,UAAM,YAAQ,oCAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,OAAO,SAAS,KAAK,OAAO;AAEzF,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,OAAO,KAAK;AAAA,cACtB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,sDAAC,oBAAAA,SAAA,EAAgB,UAAU,cAAc,QAAQ,gBAAgB;AAAA;AAAA,QAClE;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,4CAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,eAAO,yBAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
4
+ "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\t// Use the shape's specified width and height, falling back to defaults if missing or invalid.\n\t\tconst width = shape.props.w > 0 ? shape.props.w : 300\n\t\tconst height = shape.props.h > 0 ? shape.props.h : 300\n\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${width}px`,\n\t\t\t\t\t\theight: `${height}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgGK;AAhGL,oBAOO;AAEP,0BAA4B;AAC5B,mCAAoC;AACpC,8BAA+B;AAGxB,MAAM,sBAAsB,wBAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,0BAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAE5B,UAAM,QAAQ,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAClD,UAAM,SAAS,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAEnD,UAAM,YAAQ,oCAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,SAAS,KAAK;AAE3E,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cACjB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,sDAAC,oBAAAA,SAAA,EAAgB,UAAU,cAAc,QAAQ,gBAAgB;AAAA;AAAA,QAClE;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,4CAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,eAAO,yBAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
6
6
  "names": ["ChatPollContent"]
7
7
  }
package/dist-cjs/lib/shapes/poll/components/poll-content.js CHANGED
@@ -33,8 +33,16 @@ __export(poll_content_exports, {
33
33
  module.exports = __toCommonJS(poll_content_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_recharts = require("recharts");
36
+ var import_useTranslation = require("../../../ui/hooks/useTranslation/useTranslation");
36
37
  var import_CustomizedAxisTick = __toESM(require("./CustomizedAxisTick"));
37
38
  var import_styles = __toESM(require("./styles"));
39
+ const translatedAnswersKeys = {
40
+ True: "app.poll.t",
41
+ False: "app.poll.f",
42
+ Yes: "app.poll.y",
43
+ No: "app.poll.n",
44
+ Abstention: "app.poll.abstention"
45
+ };
38
46
  const caseInsensitiveReducer = (acc, item) => {
39
47
  const index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase());
40
48
  if (index !== -1) {
@@ -79,10 +87,12 @@ const ChatPollContent = ({
79
87
  }) => {
80
88
  const pollData = JSON.parse(string);
81
89
  assertAsMetadata(pollData);
90
+ const msg = (0, import_useTranslation.useTranslation)();
82
91
  const answers = pollData.answers.reduce(caseInsensitiveReducer, []);
83
92
  const translatedAnswers = answers.map((answer) => {
84
- const translationKey = answer.key;
85
- const pollAnswer = translationKey ? translationKey : answer.key;
93
+ const key = answer.key;
94
+ const translationKey = msg(translatedAnswersKeys[key] || key);
95
+ const pollAnswer = `${answer.isCorrectAnswer ? "\u2705 " : ""}${translationKey ? translationKey : answer.key}`;
86
96
  return {
87
97
  ...answer,
88
98
  pollAnswer
package/dist-cjs/lib/shapes/poll/components/poll-content.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
4
- "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwFG;AAtFH,sBAAiE;AAEjE,gCAA+B;AAC/B,oBAAmB;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,4CAAC,yBAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,4CAAC,0BAAAC,SAAA,EAAmB,GAAI;AAAA,MACrF,4CAAC,uBAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst translatedAnswersKeys = {\n\tTrue: 'app.poll.t',\n\tFalse: 'app.poll.f',\n\tYes: 'app.poll.y',\n\tNo: 'app.poll.n',\n\tAbstention: 'app.poll.abstention',\n}\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n\tisCorrectAnswer?: boolean\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\tconst msg = useTranslation()\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst key = answer.key as keyof typeof translatedAnswersKeys\n\t\tconst translationKey = msg((translatedAnswersKeys[key] || key) as TLUiTranslationKey)\n\t\tconst pollAnswer = `${answer.isCorrectAnswer ? '\u2705 ' : ''}${\n\t\t\ttranslationKey ? translationKey : answer.key\n\t\t}`\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsGG;AApGH,sBAAiE;AAEjE,4BAA+B;AAC/B,gCAA+B;AAC/B,oBAAmB;AAEnB,MAAM,wBAAwB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,YAAY;AACb;AAEA,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAwBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,MAAM,OAAO;AACnB,UAAM,iBAAiB,IAAK,sBAAsB,GAAG,KAAK,GAA0B;AACpF,UAAM,aAAa,GAAG,OAAO,kBAAkB,YAAO,EAAE,GACvD,iBAAiB,iBAAiB,OAAO,GAC1C;AACA,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,4CAAC,yBAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,4CAAC,0BAAAC,SAAA,EAAmB,GAAI;AAAA,MACrF,4CAAC,uBAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
6
6
  "names": ["Styled", "CustomizedAxisTick"]
7
7
  }
package/dist-cjs/lib/shapes/poll/poll-shape-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/shapes/poll/poll-shape-types.ts"],
4
- "sourcesContent": ["import { TLBaseShape, TLDefaultColorStyle } from '@bigbluebutton/editor'\n\nexport type IPollShape = TLBaseShape<\n\t'poll',\n\t{\n\t\tw: number\n\t\th: number\n\t\tcolor: TLDefaultColorStyle\n\t\tfill: string\n\t\tquestion: string\n\t\tnumRespondents: number\n\t\tnumResponders: number\n\t\tquestionText: string\n\t\tquestionType: string\n\t\tanswers: Array<{\n\t\t\tid: number\n\t\t\tkey: string\n\t\t\tnumVotes: number\n\t\t}>\n\t}\n>\n"],
4
+ "sourcesContent": ["import { TLBaseShape, TLDefaultColorStyle } from '@bigbluebutton/editor'\n\nexport type IPollShape = TLBaseShape<\n\t'poll',\n\t{\n\t\tw: number\n\t\th: number\n\t\tcolor: TLDefaultColorStyle\n\t\tfill: string\n\t\tquestion: string\n\t\tnumRespondents: number\n\t\tnumResponders: number\n\t\tquestionText: string\n\t\tquestionType: string\n\t\tanswers: Array<{\n\t\t\tid: number\n\t\t\tkey: string\n\t\t\tnumVotes: number\n\t\t\tisCorrectAnswer?: boolean\n\t\t}>\n\t}\n>\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs CHANGED
@@ -38,7 +38,8 @@ class PollShapeUtil extends ShapeUtil {
38
38
  });
39
39
  }
40
40
  component(shape) {
41
- const { bounds } = this.editor.getShapeGeometry(shape);
41
+ const width = shape.props.w > 0 ? shape.props.w : 300;
42
+ const height = shape.props.h > 0 ? shape.props.h : 300;
42
43
  const theme = getDefaultColorTheme({
43
44
  isDarkMode: this.editor.user.getIsDarkMode()
44
45
  });
@@ -51,7 +52,7 @@ class PollShapeUtil extends ShapeUtil {
51
52
  questionType: shape.props.questionType,
52
53
  answers: shape.props.answers
53
54
  });
54
- const adjustedHeight = shape.props.questionText.length > 0 ? bounds.height - 75 : bounds.height;
55
+ const adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height;
55
56
  return /* @__PURE__ */ jsx(
56
57
  HTMLContainer,
57
58
  {
@@ -72,7 +73,8 @@ class PollShapeUtil extends ShapeUtil {
72
73
  "div",
73
74
  {
74
75
  style: {
75
- width: `${bounds.width}px`,
76
+ width: `${width}px`,
77
+ height: `${height}px`,
76
78
  overflow: "hidden",
77
79
  position: "relative"
78
80
  },
package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/shapes/poll/PollShapeUtil.tsx"],
4
- "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\tconst { bounds } = this.editor.getShapeGeometry(shape)\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? bounds.height - 75 : bounds.height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${bounds.width}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
- "mappings": "AA4FK;AA5FL;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,qBAAqB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAGxB,MAAM,sBAAsB,UAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,YAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAC5B,UAAM,EAAE,OAAO,IAAI,KAAK,OAAO,iBAAiB,KAAK;AACrD,UAAM,QAAQ,qBAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,OAAO,SAAS,KAAK,OAAO;AAEzF,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,OAAO,KAAK;AAAA,cACtB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,8BAAC,mBAAgB,UAAU,cAAc,QAAQ,gBAAgB;AAAA;AAAA,QAClE;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,oBAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,WAAO,UAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
4
+ "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\t// Use the shape's specified width and height, falling back to defaults if missing or invalid.\n\t\tconst width = shape.props.w > 0 ? shape.props.w : 300\n\t\tconst height = shape.props.h > 0 ? shape.props.h : 300\n\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${width}px`,\n\t\t\t\t\t\theight: `${height}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
+ "mappings": "AAgGK;AAhGL;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,qBAAqB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAGxB,MAAM,sBAAsB,UAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,YAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAE5B,UAAM,QAAQ,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAClD,UAAM,SAAS,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAEnD,UAAM,QAAQ,qBAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,SAAS,KAAK;AAE3E,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cACjB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,8BAAC,mBAAgB,UAAU,cAAc,QAAQ,gBAAgB;AAAA;AAAA,QAClE;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,oBAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,WAAO,UAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
6
6
  "names": []
7
7
  }
package/dist-esm/lib/shapes/poll/components/poll-content.mjs CHANGED
@@ -1,7 +1,15 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
3
+ import { useTranslation } from "../../../ui/hooks/useTranslation/useTranslation.mjs";
3
4
  import CustomizedAxisTick from "./CustomizedAxisTick.mjs";
4
5
  import Styled from "./styles.mjs";
6
+ const translatedAnswersKeys = {
7
+ True: "app.poll.t",
8
+ False: "app.poll.f",
9
+ Yes: "app.poll.y",
10
+ No: "app.poll.n",
11
+ Abstention: "app.poll.abstention"
12
+ };
5
13
  const caseInsensitiveReducer = (acc, item) => {
6
14
  const index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase());
7
15
  if (index !== -1) {
@@ -46,10 +54,12 @@ const ChatPollContent = ({
46
54
  }) => {
47
55
  const pollData = JSON.parse(string);
48
56
  assertAsMetadata(pollData);
57
+ const msg = useTranslation();
49
58
  const answers = pollData.answers.reduce(caseInsensitiveReducer, []);
50
59
  const translatedAnswers = answers.map((answer) => {
51
- const translationKey = answer.key;
52
- const pollAnswer = translationKey ? translationKey : answer.key;
60
+ const key = answer.key;
61
+ const translationKey = msg(translatedAnswersKeys[key] || key);
62
+ const pollAnswer = `${answer.isCorrectAnswer ? "\u2705 " : ""}${translationKey ? translationKey : answer.key}`;
53
63
  return {
54
64
  ...answer,
55
65
  pollAnswer
package/dist-esm/lib/shapes/poll/components/poll-content.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
4
- "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
- "mappings": "AAwFG,cAEC,YAFD;AAtFH,SAAS,KAAK,UAAU,qBAAqB,OAAO,aAAa;AAEjE,OAAO,wBAAwB;AAC/B,OAAO,YAAY;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,qBAAC,OAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,wBAAC,OAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,oBAAC,uBAAoB,OAAM,OAAM,QAAQ,WACxC,+BAAC,YAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,0BAAC,SAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,oBAAC,SAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,oBAAC,sBAAmB,GAAI;AAAA,MACrF,oBAAC,OAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst translatedAnswersKeys = {\n\tTrue: 'app.poll.t',\n\tFalse: 'app.poll.f',\n\tYes: 'app.poll.y',\n\tNo: 'app.poll.n',\n\tAbstention: 'app.poll.abstention',\n}\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n\tisCorrectAnswer?: boolean\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\tconst msg = useTranslation()\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst key = answer.key as keyof typeof translatedAnswersKeys\n\t\tconst translationKey = msg((translatedAnswersKeys[key] || key) as TLUiTranslationKey)\n\t\tconst pollAnswer = `${answer.isCorrectAnswer ? '\u2705 ' : ''}${\n\t\t\ttranslationKey ? translationKey : answer.key\n\t\t}`\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
+ "mappings": "AAsGG,cAEC,YAFD;AApGH,SAAS,KAAK,UAAU,qBAAqB,OAAO,aAAa;AAEjE,SAAS,sBAAsB;AAC/B,OAAO,wBAAwB;AAC/B,OAAO,YAAY;AAEnB,MAAM,wBAAwB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,YAAY;AACb;AAEA,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAwBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,MAAM,OAAO;AACnB,UAAM,iBAAiB,IAAK,sBAAsB,GAAG,KAAK,GAA0B;AACpF,UAAM,aAAa,GAAG,OAAO,kBAAkB,YAAO,EAAE,GACvD,iBAAiB,iBAAiB,OAAO,GAC1C;AACA,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,qBAAC,OAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,wBAAC,OAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,oBAAC,uBAAoB,OAAM,OAAM,QAAQ,WACxC,+BAAC,YAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,0BAAC,SAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,oBAAC,SAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,oBAAC,sBAAmB,GAAI;AAAA,MACrF,oBAAC,OAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bigbluebutton/tldraw",
3
3
  "description": "BigBlueButton's fork of tldraw 2.0-alpha.19 - A tiny little drawing editor.",
4
- "version": "2.0.0-alpha.29",
4
+ "version": "2.0.0-alpha.30",
5
5
  "packageManager": "yarn@3.5.0",
6
6
  "author": {
7
7
  "name": "tldraw GB Ltd.",
@@ -35,7 +35,7 @@
35
35
  "src"
36
36
  ],
37
37
  "dependencies": {
38
- "@bigbluebutton/editor": "2.0.0-alpha.29",
38
+ "@bigbluebutton/editor": "2.0.0-alpha.30",
39
39
  "@radix-ui/react-alert-dialog": "^1.0.0",
40
40
  "@radix-ui/react-context-menu": "^2.1.5",
41
41
  "@radix-ui/react-dialog": "^1.0.5",
package/src/lib/shapes/poll/PollShapeUtil.tsx CHANGED
@@ -49,7 +49,10 @@ export class PollShapeUtil extends ShapeUtil<IPollShape> {
49
49
  }
50
50
 
51
51
  component(shape: IPollShape) {
52
- const { bounds } = this.editor.getShapeGeometry(shape)
52
+ // Use the shape's specified width and height, falling back to defaults if missing or invalid.
53
+ const width = shape.props.w > 0 ? shape.props.w : 300
54
+ const height = shape.props.h > 0 ? shape.props.h : 300
55
+
53
56
  const theme = getDefaultColorTheme({
54
57
  isDarkMode: this.editor.user.getIsDarkMode(),
55
58
  })
@@ -65,7 +68,7 @@ export class PollShapeUtil extends ShapeUtil<IPollShape> {
65
68
  answers: shape.props.answers,
66
69
  })
67
70
 
68
- const adjustedHeight = shape.props.questionText.length > 0 ? bounds.height - 75 : bounds.height
71
+ const adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height
69
72
 
70
73
  return (
71
74
  <HTMLContainer
@@ -85,7 +88,8 @@ export class PollShapeUtil extends ShapeUtil<IPollShape> {
85
88
  >
86
89
  <div
87
90
  style={{
88
- width: `${bounds.width}px`,
91
+ width: `${width}px`,
92
+ height: `${height}px`,
89
93
  overflow: 'hidden',
90
94
  position: 'relative',
91
95
  }}
package/src/lib/shapes/poll/components/poll-content.tsx CHANGED
@@ -2,9 +2,18 @@
2
2
  import React from 'react'
3
3
  import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
4
4
  import { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'
5
+ import { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'
5
6
  import CustomizedAxisTick from './CustomizedAxisTick'
6
7
  import Styled from './styles'
7
8
 
9
+ const translatedAnswersKeys = {
10
+ True: 'app.poll.t',
11
+ False: 'app.poll.f',
12
+ Yes: 'app.poll.y',
13
+ No: 'app.poll.n',
14
+ Abstention: 'app.poll.abstention',
15
+ }
16
+
8
17
  const caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {
9
18
  const index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())
10
19
  if (index !== -1) {
@@ -39,6 +48,7 @@ interface Answers {
39
48
  key: string
40
49
  numVotes: number
41
50
  id: number
51
+ isCorrectAnswer?: boolean
42
52
  }
43
53
 
44
54
  function assertAsMetadata(metadata: unknown): asserts metadata is Metadata {
@@ -71,12 +81,16 @@ const ChatPollContent: React.FC<ChatPollContentProps> = ({
71
81
  }) => {
72
82
  const pollData = JSON.parse(string) as unknown
73
83
  assertAsMetadata(pollData)
84
+ const msg = useTranslation()
74
85
 
75
86
  const answers = pollData.answers.reduce(caseInsensitiveReducer, [])
76
87
 
77
88
  const translatedAnswers = answers.map((answer: Answers) => {
78
- const translationKey = answer.key as TLUiTranslationKey
79
- const pollAnswer = translationKey ? translationKey : answer.key
89
+ const key = answer.key as keyof typeof translatedAnswersKeys
90
+ const translationKey = msg((translatedAnswersKeys[key] || key) as TLUiTranslationKey)
91
+ const pollAnswer = `${answer.isCorrectAnswer ? '✅ ' : ''}${
92
+ translationKey ? translationKey : answer.key
93
+ }`
80
94
  return {
81
95
  ...answer,
82
96
  pollAnswer,
package/src/lib/shapes/poll/poll-shape-types.ts CHANGED
@@ -16,6 +16,7 @@ export type IPollShape = TLBaseShape<
16
16
  id: number
17
17
  key: string
18
18
  numVotes: number
19
+ isCorrectAnswer?: boolean
19
20
  }>
20
21
  }
21
22
  >