Handle border edits (#537)

onlook-dev · Oct 15, 2024 · 29270d5 · 29270d5
1 parent db05e18
commit 29270d5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/app/src/components/Announcement/index.tsx b/app/src/components/Announcement/index.tsx
@@ -77,7 +77,7 @@ function Announcement() {
  alt="Onlook logo"
  />
  <div className="absolute top-10 w-full items-center flex flex-col space-y-2">
- <WordLogo className="invert"/>
+ <WordLogo className="invert" />
  <DialogTitle className="text-xs">
  Version {window.env.APP_VERSION}
  </DialogTitle>

diff --git a/app/src/components/ui/logo.tsx b/app/src/components/ui/logo.tsx
@@ -9,10 +9,7 @@ const WordLogo = React.forwardRef<HTMLImageElement, ImgHTMLAttributes<HTMLImageE
  ref={ref}
  src={wordLogo}
  alt="Onlook logo"
- className={cn(
- 'w-1/4 dark:invert', 
- className,
- )}
+ className={cn('w-1/4 dark:invert', className)}
  {...props}
  />
  ),

diff --git a/app/src/lib/editor/engine/code/index.ts b/app/src/lib/editor/engine/code/index.ts
@@ -57,6 +57,7 @@ export class CodeManager {
  }
 
  async write(action: Action) {
+ // TODO: These can all be processed at once at the getCodeDiffRequests level
  this.writeQueue.push(action);
  if (!this.isExecuting) {
  await this.processWriteQueue();
@@ -65,13 +66,18 @@ export class CodeManager {
 
  private async processWriteQueue() {
  this.isExecuting = true;
- while (this.writeQueue.length > 0) {
+ if (this.writeQueue.length > 0) {
  const action = this.writeQueue.shift();
  if (action) {
  await this.executeWrite(action);
  }
  }
- this.isExecuting = false;
+ setTimeout(() => {
+ this.isExecuting = false;
+ if (this.writeQueue.length > 0) {
+ this.processWriteQueue();
+ }
+ }, 1000);
  }
 
  private async executeWrite(action: Action) {

diff --git a/app/src/routes/editor/EditPanel/inputs/compound/BorderInput.tsx b/app/src/routes/editor/EditPanel/inputs/compound/BorderInput.tsx
@@ -58,7 +58,16 @@ const BorderInput = observer(({ compoundStyle }: { compoundStyle: CompoundStyle
  }
 
  setShowGroup(!colorIsEmpty);
- editorEngine.style.updateElementStyle('borderWidth', newBorderWidth);
+ if (newBorderWidth !== originalBorderWidth) {
+ const inTransaction = editorEngine.history.isInTransaction;
+ if (inTransaction) {
+ editorEngine.history.commitTransaction();
+ }
+ editorEngine.style.updateElementStyle('borderWidth', newBorderWidth);
+ if (inTransaction) {
+ editorEngine.history.startTransaction();
+ }
+ }
  };
 
  function renderTopInput() {